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

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

它正在进行导航。。。因此，如果我没有登录并单击“dashboard”，我将被重定向到会员登录页面。如果我登录并单击“登录”，我将被重定向到仪表板页面。酷

除非我在地址栏中键入路径，也就是说，如果我登录并单击“登录”，我会被重定向到仪表板，但是如果我在地址栏中键入/member login，它仍然会将我带到member login页面，而且不应该。如果我未登录，则与仪表板页面相反

我正在使用

beforeach（）

方法来执行防护，下面是我所拥有的：

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文件中

我错过了什么

---

非常感谢

您的意思是输入

/会员登录名

，然后进入登录页面？在我看来，这是正确的行动，还是我有一些误解？

---

你能提供更多细节吗？

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

我有

router.beforeach

方法在

newvue（{}）

方法下面，它不喜欢这样。因此，将

beforeach

方法移动到

新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/>'
});

newvue({
el:“#应用程序”，
路由器，
商店，
组件：{App}，
模板：“”
});
路由器.beforeach（（到、从、下一个）=>{
让ls=JSON.parse（localStorage.getItem（'loggedInMember'）；
如果（ls==null&&to.name==='dashboard'）{
下一步（'/member login'）；
}else if（ls！==null&&to.name==='login'）{
下一步（'/dashboard'）；
}否则{
next（）；
}
});

固定：

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/>'
});

router.beforeach（（to，from，next）=>{
让ls=JSON.parse（localStorage.getItem（'loggedInMember'）；
如果（ls==null&&to.name==='dashboard'）{
下一步（'/member login'）；
}else if（ls！==null&&to.name==='login'）{
下一步（'/dashboard'）；
}否则{
next（）；
}
});
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
商店，
组件：{App}，
模板：“”
});

如果用户未登录，则这是正确的。但是如果用户登录，它应该将他重定向到仪表板页面。我明白了，您是否在某处更改或重写了本地存储？你可以在这里设置一个断点来查看到底发生了什么。我只是检查本地存储项是否存在，如果存在，那么用户就登录了。我可以在devtools中看到本地存储是否存在。正如我提到的，使用导航按钮，它可以完美地工作，但是当输入url路径时，它不再保护路由。请看我自己的答案中的解决方案…我这方面的愚蠢疏忽。