Question

我的vue js中有以下beforeEach代码。我只需要检查已登录，而不需要authRequired。如果我从if条件中删除authRequired，则此函数看起来。还有什么其他方法可以只检查localstorage值而不检查authRequired。

router.beforeEach((to, from, next) => {
  const publicPages = ['/login', '/register'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('user');

  if (authRequired && !loggedIn) {
    return next('/login');
  }

  next();
})

我在代码之前尝试过。陷入连续循环。

router.beforeEach((to, from, next) => {
  const publicPages = ['/login', '/register'];
  const loggedIn = localStorage.getItem('user');

  if (!loggedIn) {
    return next('/login');
  }

  next();
})

Answer 1

如果您想继续使用全局防护（router.beforeEach），我什么也看不到。如果您愿意停止使用全局路由防护，则可以使用beforeEnter并将其手动应用于每个路由。在此解决方案中，将能够在除“登录”路由之外的所有路由上使用第二个功能。

const authGuard = (to,from,next) => {
  const loggedIn = localStorage.getItem('user');

  if (!loggedIn) {
      return next('/login');
    }

    next();
}

const routes = [
    {
        path: '/login',
        component: Login
    },
    {
        path: '/someProtectedRoute',
        component: Bar,
        beforeEnter: authGuard
    },
    {
        path: '/anotherProtcted',
        component: Bar,
        beforeEnter: authGuard
    }
]

循环中的vuejs路由器

1 个答案: