vue 使用 typescript 写法请求刷新 token，将 token commit 到 store 无效

Question

问题遇到的现象和发生背景

vue typescript 使用axios框架刷新token，将 token commit 到 store 无效

问题相关代码

store 下 user 模块

import { UserState } from "./moduleTypes";
import RootState from "../rootTypes";
import { MutationTree, ActionTree, Module } from "vuex";
import LOGIN_API from '@/api/login';
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import { message } from "ant-design-vue";
import router from "@/router";

const state: UserState = {
    auth: {
        accessToken: '',
        refreshToken: '',
    },
    name: '',
    login: false,
}

const mutations: MutationTree<UserState> = {
    LOGIN_SUCCESS: (state, payload) => {
        state.login = true;
        state.auth = {
            accessToken: payload.accessToken,
            refreshToken: payload.refreshToken,
        };
        state.name = payload.name;
    },
    RESET_USER: (state) => {
        state.login = false;
        state.auth = {};
        state.name = '';
    },
    REFRESH_TOKEN: (state, payload) => {
        state.login = true;
        state.auth = {
            accessToken: payload.accessToken,
            refreshToken: payload.refreshToken,
        };
    },
}

const actions: ActionTree<UserState, RootState> = {
    login: ({ commit }, { username, password }) => {
        return new Promise((resolve, reject) => {
            LOGIN_API.login(username, password).then((res) => {
                if (res.data) {
                    commit("LOGIN_SUCCESS", {
                        accessToken: res.data.auth.accessToken,
                        refreshToken: res.data.auth.refreshToken,
                        name: res.data.name,
                        login: true,
                    });
                    router.push("/");
                    message.success("Login success!");
                } else {
                    commit("RESET_USER");
                }    
                resolve(res);
            }).catch(error => {reject(error)})
        })
    },
    logout: ({commit}) => {
        commit("RESET_USER");
        router.push("/login");
        message.success("Logout success!");
    },
    refreshToken: ({ commit }, {accessToken, refreshToken}) => {
        commit("REFRESH_TOKEN", {
            accessToken: accessToken,
            refreshToken: refreshToken
        });
    },
}

export const user: Module<UserState, RootState> = {
    namespaced: true,
    state,
    mutations,
    actions
}

axios response 拦截

import store from '@/store';
...
...

service.interceptors.response.use(res => {
    console.log("Global response: " + JSON.stringify(res));
    return res;
}, error => {
  message.error(error.response.data.title + ":" + error.response.data.details);
  console.log("Error response: " + JSON.stringify(error));
       // 存储失败的请求
       const originalRequest = error.config;
       console.log("originalRequest: " + originalRequest.url);
       if (
         (error.response.status === 401 ||
           (error.response.status === 500 &&
             (error.response.data.detail ===
               "Full authentication is required to access this resource" || error.response.data.detail ===
             "Access is denied"))) &&
             !(originalRequest.url === process.env.VUE_APP_API_LOGIN) &&
         !originalRequest._retry
       ) {
        originalRequest._retry = true;
        const refreshToken = (store as any).state.user.auth.refreshToken;
        const accessToken = (store as any).state.user.auth.accessToken;
        // 刷新 token
        return axios
          .post(`${process.env.VUE_APP_API_URL}/authorize/token/refresh`, null, {
            headers: {
              Authorization: "Bearer " + accessToken,
            },
            params: {
              refreshToken: refreshToken,
            },
          })
          .then((res) => {
            // 在 store 中存储
           (store as any).commit("user/REFRESH_TOKEN", {accessToken: res.data.accessToken, refreshToken: res.data.refreshToken});
           const newAccessToken =  (store as any).state.user.auth.accessToken

            console.log('origin access token: ' + accessToken);
            console.log('response access token: ' + res.data.accessToken);
            console.log('new access token: ' + newAccessToken);

           // 使用新的 token 发送原有的请求
            service.defaults.headers.common["AUTH_TOKEN"] =
              "Bearer " + (store as any).state.user.auth.accessToken;
            return service(originalRequest);
          })
          .catch((error) => Promise.reject(error)); 
       }
       return Promise.reject(error); 
});

运行结果及报错内容

控制台没有打印出 origin/response/new access token 出来, 没有具体报错

我的解答思路和尝试过的方法

尝试不写 user 模块即如下，origin/response/new access token 可以打印出来，但是 new access token 与origin access token 仍然一致，没有变化

(store as any).commit("REFRESH_TOKEN", {accessToken: res.data.accessToken, refreshToken: res.data.refreshToken});

# console log
request.ts:82 origin access token: eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJ5ZWtvbmdsZSIsImF1dGhvcml0aWVzIjpbIlJPTEVfVVNFUiIsIlJPTEVfQURNSU4iXSwic3ViIjoiaGFuayIsImlhdCI6MTY1MDY5MDA1OSwiZXhwIjoxNjUwNjkwMDY0fQ.cu_OaqP4hER5biIeV7H4__80Fh_iUnDXjdwWmyuVgYAU-BUvrqxM2NiOsz-o1g6PXoR4GQUEsc-Fb51Wmp9o7A

request.ts:83 response access token: eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJ5ZWtvbmdsZSIsImF1dGhvcml0aWVzIjpbIlJPTEVfVVNFUiIsIlJPTEVfQURNSU4iXSwic3ViIjoiaGFuayIsImlhdCI6MTY1MDY5NDE4MiwiZXhwIjoxNjUwNjk0MTg3fQ.EOXcmEPUFPy84qX1hw2Rke0SWewT3B6Qm2gGz56S5MsskaSjA-wM7pKV-t0399RUqGnag05QmCye79RagSHsWw

request.ts:84 new access token: eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJ5ZWtvbmdsZSIsImF1dGhvcml0aWVzIjpbIlJPTEVfVVNFUiIsIlJPTEVfQURNSU4iXSwic3ViIjoiaGFuayIsImlhdCI6MTY1MDY5MDA1OSwiZXhwIjoxNjUwNjkwMDY0fQ.cu_OaqP4hER5biIeV7H4__80Fh_iUnDXjdwWmyuVgYAU-BUvrqxM2NiOsz-o1g6PXoR4GQUEsc-Fb51Wmp9o7A

我想要达到的结果

new access token 与 response access token 一致