无感知刷新操作(对token的过期失效理)

无感知刷新操作(对token的过期失效理)

// 第二种axios的无痛刷新 --- 设置在aixos响应拦截器中
instance.interceptors.response.use(function(response) {
    return response
}, async function(error) {
    if(error.response && error.response.status === 401) {
        // 取到存入本地的refresh_token信息
        const refreshToken = store.state.userToke.refresh_token
        try {
        // 拿着这个 refresh_token 重新发送一次请求，去生成新的token信息
        const result = await axios({
            method: 'PUT',
            url: 'http://toutiao-app.itheima.net/v1_0/authorizations',
            headers: {
                Authorization: `Bearer ${refreshToken}`
            }
        })
        // console.log(result.data.data); // 一个对象只有一个token信息
        // 保存生成的新的token信息  token + refresh_token 是个对象
        const newToken = result.data.data.token
        // 调用vuex保存新token  --- 更新 新token
        store.commit('setToken', {
            refresh_token : newToken,
            token: newToken
        })
        // 以  **之前的参数+新的token信息**  重新发起一次请求A
        // error.config: 缓存了请求A接口之前的参数
        // 这里是使用我们更新之前修改token信息之后导致发送的请求残生401的错误代码，导致请求失败，这里我们调用原来的请求信息，
        // 但是使用新的token，重新在发起一次一模一样的请求，去替换原来的发生错误的请求
        return instance(error.config) 

        } catch {  // 使用refreshToken请求失败 -- 清空vuex内的token信息
            // 清空vuex中的token
            store.commit('delToken')
            // 路由跳转，进入登陆页  --- 这里跳转引入了 router文件才能发生跳转
            router.push({
                path: '/login',
                query: {
                    // currentRoute： 表示当前的路由
                    backto: router.currentRoute.fullPath
                }
            })
        }     
    }
})