Question

我正在建立一个laravel vue项目，并且我正在为用户身份验证使用 JWT身份验证。我正在尝试使用Vue Router保护路由，并且它正在从本地存储中获取令牌并向特定路由授予对真实用户的访问权限，但是如果我单击任何其他路由或刷新页面，它将在另一条路由上重定向我再次"/login"页面。令牌始终保持不变，但由于用户不可靠，因此正在考虑使用令牌。请帮忙，因为我是laravel和vue的新手

我尝试使用元信息，但效果不佳。而且，我尝试从本地存储中删除令牌，然后再次创建它，但对我来说没有用。

routes.js文件

    export const routes = [
    {
        path: '/', component: Home, name: 'home'
    },
    {
        path: '/dashboard', component: Dashboard, name: 'dashboard', meta:{requiresAuth: true}
    },
    {
        path: '/login', component: Login, name: 'login'
    }
];

App.js文件

import VueRouter from 'vue-router';
import { routes } from './routes.js';

window.Vue = require('vue');

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes
});

router.beforeEach((to, from, next) => {
  console.log(to)
  if (to.meta.requiresAuth) {
    const authUser = JSON.stringify(window.localStorage.getItem('usertoken'))
    if(authUser && authUser.accessToken){
      console.log("here")
      next();
    }else{
      next({name: 'login'});
    }
  }
  next();
  });

const app = new Vue({
  el: '#app',
  router
});

我希望输出结果像是当用户是真实的并且router.beforeEach方法找到一个令牌时，用户可以到达任何路由，直到令牌被删除或更改为止。此外，不应每次单击'/login'或刷新页面时都将用户带到<router-link>。

Answer 1

我只是想解决它，而它已解决 ...问题出在if(authUser && authUser.accessToken)行上。我添加了authUser.accessToken作为未满足的条件，因此每次点击都会重定向。我删除了该条件，只剩下了if(authUser)，现在它运行良好。另外，我还添加了JSON.stringify来将对象更改为文本，然后通过传递变量来向JSON.parse进行身份验证。

我的最终代码如下：-

router.beforeEach((to, from, next) => {
  console.log(to)
  if (to.meta.requiresAuth) {
    var usertoken = JSON.stringify(window.localStorage.getItem('usertoken'))
    const authUser = JSON.parse(usertoken)
    if(authUser){
      console.log("here")
      next();
    }else{
      next({name: 'login'});
    }
  }
  next();
  });

如何解决Vue路由器防护重新路由问题？

1 个答案: