vue token过期自动跳转登录界面

在Vue中实现token过期自动跳转到登录界面的方法如下：

1. 创建一个路由守卫，用于监测用户的登录状态。在路由配置文件中，使用`beforeEach`函数来实现路由守卫。具体代码如下：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) { // 需要登录的页面且没有token
    next('/login'); // 跳转到登录页面
  } else {
    next(); // 正常跳转
  }
});

2. 在登录成功时，将token存储到localStorage中。在登录界面的登录请求成功后，将获得的token存储到localStorage中。具体代码如下：

// 登录请求成功后
localStorage.setItem('token', response.data.token);

3. 当token过期或者被清除时，需要将localStorage中的token移除并跳转到登录界面。可以在发送请求时，检测服务端返回的状态码，若为token过期或无效，则将localStorage中的token移除并跳转到登录页面。具体代码如下：

axios.interceptors.response.use(
  response => {
    // 请求成功后的处理
    return response;
  },
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token'); // 移除token
      router.push('/login'); // 跳转到登录页面
    }
    return Promise.reject(error);
  }
);

通过以上步骤，当用户的token过期或者被清除时，Vue应用会自动跳转到登录界面，确保用户的安全和身份验证。