typescript Vue 3组合API路由器参数(带导航验证保护)

wj8zmpe1  于 2022-12-27  发布在  TypeScript
关注(0)|答案(1)|浏览(159)

我有一个小问题,我不知道该怎么办。我尝试了这么多不同的解决方案,但没有工作。
我的问题:
我找到一个导航员:

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/A1 EB 34589 AD 1CCEE 77 C79 BDDC 5A 3187 DF 51 D3368 F08 B49 DA 833 AB 902 CBC 812 A513 A11 C111455 DB 8 FB 2C 0824 E5401096 F31 CFB 6D 1CEDABCCB 549 BF 5C 5D3 B1747 F),但我一打开这个链接,什么也没发生,网站正在无限加载。
有人知道我做错了什么吗?

zfciruhq

zfciruhq1#

这个方块是什么意思?

if (to.params.Token != null) {
    next({ name:"password-reset", params: { Token: to.fullPath }})
}

如果路由有一个Token参数,那么将它重定向到password-reset。这是一个循环。因为password-reset路由有Token参数,它将反复返回到它。我不知道你想用这个检查做什么。它什么也不做,除了循环。我想了解更多关于你的实现,所以我可以帮助你。
此外,您还可以直接从to参数访问路由的meta字段。documentation

router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresAuth === true && !(await isAuthenticated())) {
      next('/login');
      return;
  }
  next();
})

相关问题