Question

我有一个简单的用例，我的应用程序使用vue-router和vuex。然后store包含一个user对象，该对象在开头是null。从服务器验证用户后，它会发回一个user对象，其中包含一个JWT身份验证令牌，该令牌已分配给商店中的user对象。现在让我们假设用户在3小时后回来并尝试访问路由或执行任何其他操作，考虑到当时auth令牌已过期，最好的方法是检查（需要调用{{1}检查它）并将用户重定向到axios post页面。我的应用程序将有大量的组件，所以我知道我可以编写逻辑来检查每个组件的login挂钩中有效的令牌，但这意味着重复所有组件。另外，我不想使用mounted导航防护，因为我无法向用户显示任何视觉反馈，例如beforeEach或checking...。

Answer 1

尝试Vue.JS Mixins

您可以定义Global Mixin并通过Vue.use(myMixin)使用它 - 然后所有组件都将继承此mixin。如果您在mixin上定义mounted或可能更好的activated挂钩，则会在每个组件上调用它。

在那里，您可以使用组件可以执行的所有操作 - this将指向您的组件。如果组件也定义了一个钩子本身，那么相同类型的mixin钩子将在组件自己的钩子之前运行。

或尝试使用单个顶级登录组件

我们使用了一个不同的解决方案 - 我们有一个组件可以处理与登录相关的所有内容，它存在于父index.html中的router-view之外。此组件始终处于活动状态，可以隐藏div路由器视图并覆盖加载消息或登录屏幕。对于Intranet应用程序，只要浏览器保持打开状态，此组件也将使用轮询来保持会话处于活动状态。

您可以将路由器导航加载到此组件。 - 因此，想要触发路由器导航的子组件只设置由顶级认证组件监视的全局响应属性navigateTo。这将触发身份验证检查，可能是登录工作流，之后顶级组件将调用$router.push()使用此方法，您可以完全控制任何导航。

Answer 2

我在我的一个项目中做了类似的事情，实际上看起来很难处理这些类型的情况，但你可以为受保护的路由添加beforeEnter防护，然后在验证失败时重定向。

const guard = function(to, from, next) {
  // check for valid auth token
  axios.get('/api/checkAuthToken').then(response => {
      // Token is valid, so continue
      next();
  }).catch(error => {
      // There was an error so redirect
      window.location.href = "/login";
  })
};

然后在你的路线上你可以做到：

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    guard(to, from, next);
  }
},

您可能会注意到我使用了location.href而不是router.push。我这样做是因为我的登录表单受csrf保护，所以我需要一个新的csrf_token。

如果用户尝试与您的页面进行交互而不更改路由（即他们单击按钮并获得401响应），则会出现另一个问题。为此，我发现最简单的方法是检查每个axios请求的身份验证，并在收到401响应时重定向到login。

在保护检查期间添加加载微调器时，您只需向vuex商店添加加载标志，然后将商店导入路由器。老实说虽然我不打扰，但在一个不错的生产服务器上，检查将很快完成，用户不太可能看到它。

Answer 3

当某些请求发生时，您可以使用interceptors以静默方式获取身份验证令牌。

    axios.interceptors.response.use(function (response) {
         return response;
       }, function (error) {

              const originalRequest = error.config;

             if (error.response.status === 401 && !originalRequest._retry) {

              originalRequest._retry = true;

              const rToken = window.localStorage.getItem('rToken');
              return axios.post('url/to/get/refresh/token', { rToken })
                     .then(({data}) => {
                     window.localStorage.setItem('token', data.token);
                     window.localStorage.setItem('rToken', data.refreshToken);
                     axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.token;
                    originalRequest.headers['Authorization'] = 'Bearer ' + data.token;
                    return axios(originalRequest);
           });
      }

      return Promise.reject(error);
   });

Answer 4

由于您使用vuex，因此您可以添加某些状态，例如isLoading或isChecking。

在您的router.beforeEach中，您可以检查并设置isLoading或isChecking按照您当前的检查状态。然后你可以显示加载消息遵循这种状态。

Answer 5

在我们的route.js中，我们检查beforeEnter钩住用户具有令牌或不是。

route.js

{
   path: '/dashboard',
   name: dashboard,
   meta: {
     layout: 'home-layout'
   },
   components: {
     default: Dashboard,
     header: UserHeader
   },
   beforeEnter: ifAuthenticated,
 }

route.js

const ifAuthenticated = (to, from, next) => {
 if (localStorage.getItem(token)) {
   next();
   return;
 }
 router.push({ 
   name: 'login',
   params: {
     returnTo: to.path,
     query: to.query,
   },
 });
};

在路由进入Vue路由器

5 个答案:

尝试Vue.JS Mixins

或尝试使用单个顶级登录组件