阻止用户切换路由，去登录问题

问题：

如果在router/index.js中添加了if (to.path.includes('login')) 此段代码，然后手动把页面中的token改为错误的token（在home/xxxx界面都会报错），则页面一直弹出登录过期了。

解决：

• 1. 拦截器处：清空错误的tokenlocalStorage.removeItem('token');，使其直接跳转到login;
  • 原因：如果token不存在直接走的不存在流程，直接跳到login。
  • 问题：如果添加if (to.path.includes('login')) 控制台也没有打印任何东西，修改token后，直接报错。
• 2. 删除if (to.path.includes('login')) 此段代码，可正常跳转（不清空token）；
  • 原因： 拦截器每次进入前，都会执行弹出框：识别到401错误，然后弹出登录过期了,貌似只能删除token解决= =

router/index.js

router.beforeEach(async (to, from, next) => {
  if (!to.path.includes('login') && !to.path.includes('register')) {
    const token = localStorage.token;
    if (token) {
      const res = await api.users.getUserInfo();
      console.log('resssssssss', res);
      if (res.code) {
        store.commit('SET_USER_INFO', res.data);
        next();
        // 生成动态路由
        addRoutes()
        return;
      }
    }
    MessageBox.alert('你还未登录，请先登录', '提示', {
      confirmButtonText: '确定',
      callback: action => {
        next('/login');
      }
    });
    return;
  }

    // 如果用户登录了，再手动输入login，使其自动跳转回home
  if (to.path.includes('login')) {
    const token = localStorage.token;
    if (token) {
      const res = await api.users.getUserInfo();
      if (res.code) {
        next('/home');
        return
      }
      next('/login');
    }
  }

  next();
})

utils/request.js

axios.interceptors.response.use((res) => {
    return res.data
}, (err) => {
    if (err && err.response && err.response.status) {
        if (err.response.status === 401) {
            MessageBox.alert('登录过期了', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    localStorage.removeItem('token');
                    router.replace('/login');
                    // return
                }
            });
            // router.replace('/login');
        }
    }
    return Promise.reject(err.message);
});