vue中token过期如何处理

在Vue中处理token过期有几个主要步骤：1、捕捉token过期的错误响应，2、刷新token，3、重新发送失败的请求，4、用户重新登录。其中，捕捉token过期的错误响应是最重要的一点。我们可以通过拦截器来实现这一点，这样可以确保在请求失败时能够正确处理token过期的问题。

一、捕捉token过期的错误响应

首先，我们需要在Vue项目中配置一个拦截器，用于捕捉所有HTTP请求的响应。具体步骤如下：

安装Axios：
```
npm install axios
```

在项目的src目录下创建一个新的文件http.js，用于配置Axios实例和拦截器：

import axios from 'axios';
import store from './store'; // 假设你使用的是Vuex来管理状态
const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 1000,
});
instance.interceptors.response.use(
    response => response,
    error => {
        const originalRequest = error.config;
        if (error.response.status === 401 && !originalRequest._retry) {
            originalRequest._retry = true;
            return store.dispatch('refreshToken').then(() => {
                originalRequest.headers['Authorization'] = 'Bearer ' + store.state.token;
                return axios(originalRequest);
            });
        }
        return Promise.reject(error);
    }
);
export default instance;

二、刷新token

刷新token的步骤如下：

在Vuex的store中创建一个新的action，用于刷新token：

import axios from 'axios';
const state = {
    token: localStorage.getItem('token') || '',
    refreshToken: localStorage.getItem('refreshToken') || '',
};
const mutations = {
    SET_TOKEN(state, token) {
        state.token = token;
        localStorage.setItem('token', token);
    },
    SET_REFRESH_TOKEN(state, refreshToken) {
        state.refreshToken = refreshToken;
        localStorage.setItem('refreshToken', refreshToken);
    },
};
const actions = {
    refreshToken({ commit, state }) {
        return axios.post('/auth/refresh', { token: state.refreshToken })
            .then(response => {
                commit('SET_TOKEN', response.data.token);
                return response.data.token;
            });
    },
};
export default {
    state,
    mutations,
    actions,
};

三、重新发送失败的请求

在拦截器中，捕捉到token过期的错误响应后，通过调用store中的refreshToken action来刷新token，并在刷新成功后重新发送失败的请求。具体代码如上所示。

四、用户重新登录

在极端情况下，如果刷新token失败，比如refresh token本身也过期或者无效，则需要引导用户重新登录。具体实现如下：

在http.js中添加如下代码：

instance.interceptors.response.use(
    response => response,
    error => {
        const originalRequest = error.config;
        if (error.response.status === 401 && !originalRequest._retry) {
            originalRequest._retry = true;
            return store.dispatch('refreshToken').then(() => {
                originalRequest.headers['Authorization'] = 'Bearer ' + store.state.token;
                return axios(originalRequest);
            }).catch(() => {
                store.dispatch('logout');
                window.location.href = '/login'; // 重定向到登录页面
            });
        }
        return Promise.reject(error);
    }
);

在Vuex的store中添加logout action：

const actions = {
    logout({ commit }) {
        commit('SET_TOKEN', '');
        commit('SET_REFRESH_TOKEN', '');
        localStorage.removeItem('token');
        localStorage.removeItem('refreshToken');
    },
};

总结：在Vue中处理token过期的主要步骤包括：1、捕捉token过期的错误响应，2、刷新token，3、重新发送失败的请求，4、用户重新登录。通过配置Axios拦截器和Vuex store，我们可以实现自动刷新token和重新发送请求的功能，确保用户在token过期后能够继续使用应用而不被打断。进一步的建议是，定期检查并优化token的过期处理逻辑，以提升用户体验。

vue中token过期如何处理

一、捕捉token过期的错误响应

二、刷新token

三、重新发送失败的请求

四、用户重新登录

相关问答FAQs：

发表回复