Question

我试图阻止未经授权的用户访问个人帐户页面。现在，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);
});

它可以按我的意愿工作，但是我可以在界面中看到奇怪的行为。在未经授权的情况下，当我试图访问该页面时，我可以看到一秒钟或更短的时间，然后将我重定向到登录页面。有可能摆脱这种情况吗？我想直接重定向到登录页面，而没有看到必须被阻止访问的页面。

Answer 1

我建议您使用导航卫士：https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

示例：

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

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

1 个答案: