Question

我正在尝试使用beforeEach钩子在Vue路由上设置多个中间件。

这是一个中间件login，它对localStorage中的令牌进行解码：

export default function login (router, store) {

    router.beforeEach((to, from, next) => {

      if(typeof localStorage === 'undefined')
        next();

      else {
        let token = localStorage.getItem('token');

        if (token) {
          let user = parseJWT(token)

          const stores = [
            store.dispatch('user/userState', {token: token, userId: user.id}),
            store.dispatch('userProfile/userProfile', {avatar: user.avatar, username: user.username}),
            store.dispatch('userProfile/userEmail', user.email),
          ]

          Promise.all(stores)
            .then(() => {
              next()
            })
        }
        else
          next()
      }

    })

}

function parseJWT (token) {
  let base64Url = token.split('.')[1];
  let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
  return JSON.parse(window.atob(base64));
}

这是实际上保护路由的中间件：

export default function authorizationRequired (router, store) {
  router.beforeEach((to, from, next) => {

    let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

    let noAuth = to.matched.some(record => record.meta.noAuth);

    let login = store.getters['user/isLoggedIn'];

    console.log('login: ', login)


    if (requiresAuth) {

      if (login) {
        next();
      }
      else {
        next({path: '/login'})
      }
    }
    else if (noAuth) {

      if(!login) {
        next ();
      }
      else {
        next({path: '/'})
      }

    }
    else
      next();

  })
}

这是我的问题：

每当我登录到应用程序时，一切正常，除了我直接访问/login页面时，我的Vuex状态显示为undefined，尽管{{1中有一个令牌}}。

所有localStorage后卫都会发生这种情况。

经过大量的调试工作，我发现这是因为如果直接访问URL，Vue不会再次执行中间件。而且，当我尝试直接访问任何noAuth页面时，我被重定向到/login。

由于我的代码包含以下几行：

requiresAuth

我的服务器无法检查令牌并将其用于Vuex状态。

有什么方法可以避免不必要的重定向并使我每次直接访问页面时Vuex都能正常工作？

建议将不胜感激！

预先感谢

Vue SSR-每个防护之前的路由器

0 个答案: