Как защитить как '/ login' или '/ login /', так и '/ dashboard' или '/ dashboard /' в vue-router - PullRequest
Новая
       9

Как защитить как '/ login' или '/ login /', так и '/ dashboard' или '/ dashboard /' в vue-router

0 голосов
/ 15 октября 2019

Я использую vue-router для установки routeguard в моей системе, перенаправляя пользователя, если есть токен, обратно на панель инструментов, если они пытаются ввести / login или / login / в URL, и наоборот, если у него нет токена.

router.js 

router.beforeEach((to, from, next) => {
  if (to.fullPath === '/dashboard/') {
    if (!store.state.authToken) {
      next('/login');
    }
  }
  if (to.fullPath === '/login/') {
    if (store.state.accessToken) {
      next('/dashboard');
    }
  }
  next();
});

Моя проблема в том, что если я наберу '/ login' или '/ dashboard' (без обратной косой черты в конце),он обошел мою охрану, поэтому я попытался сделать (to.fullPath === '/login/' || '/login') и (to.fullPath === '/dashboard/' || '/dashboard') в своем коде, что было успешным буквально 4 часа назад.

Затем я вернулся, и теперь он дает мне ошибки, говоря [vue-router] uncaught error during route navigationвсякий раз, когда я меняю взгляды через URL.

Я понятия не имею, почему он перестал работать, пожалуйста, помогите.

Спасибо!

РЕДАКТИРОВАТЬ: я сделал опечатку и вызывал accessTokenпоэтому вместо authToken охранник потерпел неудачу. Исправлено, спасибо!

Ответы [ 2 ]

1 голос
/ 16 октября 2019

Вместо этого вы можете дать вашим маршрутам имя и перенаправление на основе этого.

Дополнительным изменением может быть добавление мета в ваши маршруты, если для маршрута требуется аутентификация пользователя, что упрощает масштабированиебез указания каждого защищенного маршрута в вашем beforeEach

маршрутах 

{
  path: '/login',
  name: 'login',
  component: () => import('./views/Login.vue'),
  meta: { requiresAuth: false }
},
{
  path: '/dashboard',
  name: 'dashboard',
  component: () => import('./views/Dasboard.vue'),
  meta: { requiresAuth: true }
}

страже 

router.beforeEach((to, from, next) => {
  /* Both '/login' and '/login/' should share the same route name even if their path is different */
  if (to.name === 'login') {
    if (store.state.accessToken) {
      next('/dashboard');
    }
  }

  //Redirect to login if the route requires auth and no token is set
  if(to.meta.requiresAuth) {
    if (!store.state.accessToken) {
      next('/login');
    }
  }

  next();
});
0 голосов
/ 15 октября 2019

Просто используйте startsWith вместо === для сравнения: 

if (to.fullPath.startsWith('/dashboard') {...

Таким образом, вас не касаются косые черты и т. Д.

...