代码之家 › 专栏 › 技术社区 › Sergio

在地址栏中键入时,Vue路由器保护程序不会阻止受保护的路由

router navigation vue.js authentication

Sergio · 技术社区 · 6 年前

它正在航行。。。因此,如果我没有登录,并点击“仪表板”,我会被重定向到会员登录页面。如果我登录并点击“登录”,我会被重定向到仪表板页面。很酷。

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

我用的是 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文件中。

非常感谢!

2 回复 | 直到 6 年前

Sergio 6 年前

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

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

Jerry 6 年前

你是说你输入了 /member-login 它会把你带到登录页面?在我看来,这是正确的行动,还是有一些误解? 你能提供更多细节吗?

推荐文章

Manav Kushwaha · 凭据身份验证无法在NextJs应用程序路由器中使用NextAuth执行

1 年前

gametaker1985 · 致命错误:无法在/home/claymati/public_html/login中的写入上下文中使用函数返回值。php第28行

2 年前

Svetoslav Stoyanov · AzerothCore无法连接到服务器,可能是客户端发送的WorldSocket请求格式错误

2 年前

dippynark · 是否可以使用与apiserver请求关联的“extra”属性与RBAC做出授权决策?

7 年前

data_henrik · 如何将Python OpenID Connect模块与IBM云应用程序ID一起使用?

7 年前

drewrockshard · 将密码与本地文件名匹配

7 年前

Bassie · 我的凭据存储在哪里?

7 年前

Marc · getAuthEntity失败“无法匹配预期类型”

7 年前

J. Hesters · Django Rest框架:我应该使用什么进行身份验证?我应该如何使用它?

7 年前

vikash vishnu · 任何可用插件都不支持身份验证方法“caching\u sha2\u password”

7 年前