Используйте средства защиты маршрута, чтобы перенаправить пользователя на правильный маршрут, если он вошел в систему или нет - PullRequest
Новая
       20

Используйте средства защиты маршрута, чтобы перенаправить пользователя на правильный маршрут, если он вошел в систему или нет

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

Я создаю приложение, используя vue, которое требует аутентификации. Приложение имеет два родительских маршрута: 

const router = new Router({
    mode: "history",
    routes: [
      {
        path: "/",
        component: Public,
        redirect: "login",
        children: [
          /* ... */
        ],
      },
      {
        path: "/p",
        component: Private,
        meta: {
          requiresAuth: true,
        },
        children: [
            /* ... */
        ],
      },
      {
        path: "*",
        component: NotFound,
      },
    ],
  });
  • Если пользователь вошел в систему и пытается получить доступ к маршруту, который не имеет requiresAuth: true, он должен быть перенаправлен на /p маршрут, в противном случае ему должно быть разрешено ввести
  • Если пользователь вошел в систему и пытается получить доступ к маршруту, который имеет requiresAuth: true, ему следует разрешить войти, в противном случае он должен быть перенаправлен на /login route

Я придумал следующий Vue охранник маршрута: 

router.beforeResolve(async (to, _, next) => {
  const routeRequiresAuth = to.matched.some(
    (record) => record.meta.requiresAuth
  );
  try {
    await Auth.currentAuthenticatedUser();
    if (routeRequiresAuth) {
      next();
      return;
    } else {
      next("/p");
    }
  } catch {
    if (routeRequiresAuth) {
      next("/");
    } else {
      next();
    }
  }
});

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

1 Ответ

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

Ваша мета requiresAuth является хорошей реализацией (путь к go)

И вместо beforeResolve метода я предлагаю beforeEach вызываться перед обработкой каждого маршрута (намного раньше, чем beforeResolve)

Вы можете прочитать навигационный поток в официальных документах: https://router.vuejs.org/guide/advanced/navigation-guards.html#in -component-guards

Дополнительная внешняя ссылка на Auth с JWT + VueRouting: здесь

...