Javascript Axios拦截器：阻止对特定页面的访问

我试图阻止未经授权的用户访问个人帐户页面。现在Axios拦截器监视错误响应状态，如果是401，这意味着用户无权查看这些页面，它会将用户重定向到登录页面。像这样：

axiosInstance.interceptors.response.use(null, (error) => {
  if (error.response.status === 401) {
    if (router.history.current.fullPath.includes('profile')) {
      router.replace({
        path: '/login',
      });
    }
    this.$cookie.delete('token');
  }
  if (error.response.status === 404) {
    router.push({ name: 'error' });
  }
  if (error.response.status === 500) {
    router.push({ name: 'server_error' });
  }
  return Promise.reject(error);
});

---

它的工作原理和我想的一样，但我可以在界面中看到奇怪的行为。当我在未经授权的情况下尝试访问该页面时，我可以看到它一秒钟或更短的时间，然后我将重定向到登录页面。有可能摆脱这个吗？我希望直接重定向到登录页面，而不会看到必须阻止访问的页面。

我建议使用导航卫士：

例如：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        if (!isLoggedIn()) {
          next({
            path: '/login'
          })
        } else {
          next()
        }
      }
    }
  ]
})

---

我试过你的解决办法，但没有成功（我得到一个空页面，控制台显示

无法读取未定义的isLoggedIn

。此方法返回我在登录或注册后设置的令牌。当然，当我在注销后删除令牌时，它是未定义的。您应该将令牌存储在本地存储中。您可以在

isLoggedIn

方法中检索它，如下所示：

loca。）lStorage.getItem（TOKEN）

，然后检查该TOKEN是否为null或过期。我正在使用

vue cookie

库来管理cookie。在该方法中，我获取该TOKEN（

VueCookie.get（'TOKEN）

）但是我在注销后删除了它，它会返回

未定义的

。非常感谢。我们可以在方法

isTokenExpired

中执行什么样的检查？这个解决方案成功了。问题是访问我的方法

isLoggedIn

。