Question

我有一个简单的vue应用程序，我正在尝试保护某些路由，即：如果用户已登录，则显示仪表板页面并阻止成员登录页面。如果用户未登录，则显示成员登录页面，但阻止仪表板页面。

它正在导航中...因此，如果我没有登录并单击“仪表板”，我将被重定向到成员登录页面。如果我已经登录并单击“登录”，我将被重定向到仪表板页面。很好。

除非我在地址栏中键入路径，否则，如果我登录并单击“登录”，我将重定向到仪表板，但是如果我在地址栏中键入/ member-login，则仍然需要我会员登录页面，但不应该。如果未登录，则与仪表板页面相反。

我正在使用beforeEach()方法来执行警卫，这就是我所拥有的：

router.beforeEach((to, from, next) => {
   let ls = JSON.parse(localStorage.getItem('loggedInMember'));
   if(ls === null && to.name === 'dashboard'){ 
      next('/member-login');
   } else if ( ls !== null && to.name === 'login') { 
      next('/dashboard');
   } else {
      next();
   }
});

我应该提到这是一个全球守护者，它位于我项目的main.js文件中。

我想念什么？

非常感谢！

Answer 1

您的意思是您输入了/member-login，它将带您进入登录页面？在我看来，这是正确的举动，还是我误会了？您能否提供更多详细信息？

Answer 2

所以，这个问题对我来说是一个愚蠢的错误...

我在router.beforeEach方法下面有new Vue({})方法，但并不喜欢。因此，将beforeEach方法移至new Vue方法上方即可解决此问题。

越野车：

new Vue({
   el: '#app',
   router,
   store,
   components: { App },
   template: '<App/>'
});

router.beforeEach((to, from, next) => {
   let ls = JSON.parse(localStorage.getItem('loggedInMember'));

   if(ls === null && to.name === 'dashboard'){
      next('/member-login');
   } else if ( ls !== null && to.name === 'login') {
      next('/dashboard');
   } else {
      next();
   }
});

已修复：

router.beforeEach((to, from, next) => {
   let ls = JSON.parse(localStorage.getItem('loggedInMember'));

   if(ls === null && to.name === 'dashboard'){
      next('/member-login');
   } else if ( ls !== null && to.name === 'login') {
      next('/dashboard');
   } else {
      next();
   }
});

/* eslint-disable no-new */
new Vue({
   el: '#app',
   router,
   store,
   components: { App },
   template: '<App/>'
});

在地址栏中键入时，Vue路由器防护不会阻止防护的路由

2 个答案: