Как исправить проблему с перенаправлением защиты Vue Router? - PullRequest
Новая
       9

Как исправить проблему с перенаправлением защиты Vue Router?

0 голосов
/ 10 апреля 2019

Я настраиваю проект laravel, vue и использую JWT auth для пользователя аутентификация .Я пытаюсь защитить маршруты с помощью Vue Router, и он получает токен из локального хранилища и дает доступ аутентичному пользователю к определенному маршруту, но один раз по другому маршруту, если я щелкаю по любому другому маршруту или обновляю страницу, на которую он перенаправляет менястраница "/login" снова.Токен остается неизменным все время, но он рассматривает токен, поскольку пользователь не является подлинным.Пожалуйста, помогите, поскольку я новичок в laravel и vue

Я пытался использовать метаинформацию, но это не сработало.Кроме того, я попытался удалить токен из локального хранилища и создал его заново, но у меня ничего не работает.

rout.js file 

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

Приложение.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> или страница обновляется.

1 Ответ

0 голосов
/ 10 апреля 2019

Я просто пытался ее решить, и она решена ... проблема была с линией 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();
  });
...