Как реализовать vue -guards beforeEach правильно для аутентификации - PullRequest
Новая
       23

Как реализовать vue -guards beforeEach правильно для аутентификации

0 голосов
/ 17 апреля 2020

Почему мой код напрямую переходит к моему оператору else, хотя я следовал документации в vue -router?

Он напрямую переходит к моему оператору else "Даже не соответствует". На нем должно быть напечатано «Найдено совпадение».

Я что-то здесь пропустил? 

const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("../views/vLogin.vue")
  },
  {
    path: "/",
    name: "Article",
    component: () => import("@/views/articles/vArticleManage"),
    meta: {
      requiresAuth: true
    }
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    console.log("Found a match")
    let sampleAuth = true;
    if(sampleAuth) {
      next();
    } else{
      next({
       path: "/login",
        query: {
          redirect: to.fullPath
        }
      })
    }
  } else {
    console.log("Not even a match")
  }
})
export default router;

ps Вот изображение, когда я пытался записать "to" image

1 Ответ

1 голос
/ 17 апреля 2020

Я тоже изначально следовал этому предложению из документации и не имел успеха с ним.

Вместо этого теперь я использую router.beforeResolve((to, from, next), который срабатывает намного позже (срабатывает последний) в логи c.

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

Есть также router.beforeEnter, который срабатывает немного раньше, чем beforeResolve, но гораздо позже, чем beforeEach.

У меня есть 5 крупных VUE проектов, поэтому я не уверен, что фактическое использование beforeEach заключается в том, что все, что я пробовал, не работало с ним.

Подсказка: я всегда return void после вызова next(), чтобы гарантировать, что дальнейшая логика c не будет выполнена после и намного чище, чем if/else операторы, особенно если есть много if операторов.

Я не уверен насчет использования to.matched.some, поскольку все, что я построил, предсказуемо точно совпадение, поэтому я на самом деле использую:

Object.prototype.hasOwnProperty.call(to.meta, 'requiresAuth')

router.beforeResolve((to, from, next) => {

  if (Object.prototype.hasOwnProperty.call(to.meta, 'requiresAuth')) {

    console.log("Found a match")

    let sampleAuth = true;

    if(sampleAuth) {

      next();
      return;

    }

    next({
      name: 'login', // <-- Login route has a name, use that reference instead.
      query: {
        redirect: to.fullPath
      }
    })

    return;

  }

  console.log("Not even a match")

})

Подсказка: Object.prototype.hasOwnProperty.call(...) хотя и уродливая, более безопасна и надежна, чем myVar.hasOwnProperty(...) Подробнее

...