循环中的vuejs路由器

Question

我的 vue js 中有 beforeEach 代码。我只需要检查 loggedIn 而不是 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 并手动将其应用于每条路由。在此解决方案中，将能够在除 'login' 路线之外的每条路线上使用第二个功能。

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路由器

vuejs router in loop

router

vue.js