Состав Vue 3 API Router Params с навигацией Auth Guard
У меня небольшая проблема, я не знаю, что делать. Я пробовал так много разных решений, но ничего не получалось.
Моя проблема:
Получил навигационную гвардию:
import { createRouter, createWebHistory, useRoute } from "vue-router";
import { isAuthenticated } from "../service/axios-auth";
import ChangePasswordView from "../views/ChangePasswordView.vue";
import LoginView from "../views/LoginView.vue";
import HomeView from "../views/HomeView.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView,
meta: {
requiresAuth: true,
}
},
{
path: "/password-reset/Token/:Token",
name: "password-reset",
component: ChangePasswordView,
meta: {
requiresAuth: false,
}
},
{
path: "/login",
name: "login",
component: LoginView,
meta: {
requiresAuth: false,
}
}
],
});
router.beforeEach(async (to, from, next) => {
if (to.params.Token != null) {
next({ name:"password-reset", params: { Token: to.fullPath }})
} else if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!(await isAuthenticated())) {
next('/login');
} else {
next();
}
} else {
next();
}
})
export default router;
и я хочу вызвать внешнюю ссылку (http://localhost:5173/password-reset/Token/A1EB34589AD1CCEE77C79BDDC5A3187DF51D3368F08B49DA833AB902CBC812A513A11C111455DB8FB2C0824E5401096F31CF75D9CEDABCCB54D1BCEDABCCB54D но как только я открываю эту ссылку ничего не происходит и сайт загружается бесконечно.
Кто-нибудь знает, что я делаю неправильно здесь?
Ответы 2
Что означает этот блок?
if (to.params.Token != null) {
next({ name:"password-reset", params: { Token: to.fullPath }})
}
если у маршрута есть параметр Token, то перенаправьте его на password-reset. Это петля. поскольку маршрут password-reset имеет параметр Token, он будет возвращаться к нему снова и снова.
Я не знаю точно, что вы хотите сделать с этим чеком. Он ничего не делает, кроме как зацикливаться.
Я хотел бы узнать больше о вашей реализации, поэтому я могу вам помочь.
Кроме того, вы можете получить доступ к полю meta маршрута непосредственно из параметра to. документация
router.beforeEach(async (to, from, next) => {
if (to.meta.requiresAuth === true && !(await isAuthenticated())) {
next('/login');
return;
}
next();
})
Я понимаю, что если у ссылки есть токен, она будет перенаправлена на просмотр Login. Хотя это не имеет никакого смысла. представление reset-password — это то, что должно обрабатывать это действие. а если токена нет, то перенаправить его на Login. Однако для этого вам нужно перенаправить на /login: if (to.params.Token != null) next('/login');
@c3dr1c-4k; У вас уже есть средство проверки подлинности в router.beforeEach. вам не нужно помещать его в представление. Кроме того, представление reset-password не должно быть доступно для аутентифицированных пользователей, только для пользователей guest.
Я в основном глупый ... Внутри моего просмотра сброса пароля у меня есть функция onMount, которая проверяет, вошел ли я в систему. Эта функция подталкивает маршрутизатор к домашнему представлению. Вот почему я не могу зайти на сайт сброса пароля :)
в настоящее время я хочу получить доступ к просмотру сброса пароля с параметром. Но как только я запрошу веб-сайт с параметром (localhost: 5173/password-reset/Token{Token}), я буду перенаправлен на экран входа в систему, а не на запрошенный вид сброса пароля.