vue-router导航卫队不限制导航

Question

访问任何页面之前，除了登录并注册；我想通过导航警卫对用户进行身份验证。 在以后，您可以看到我的Vue-Router代码。 “这里”已记录，但是之后没有在行中取消导航。如果用户未经认证，他仍然可以访问我

的路由器文件：

import { createRouter, createWebHistory } from "vue-router";
import axios from "axios";
import HomeView from "../views/HomeView.vue";
import RegisterView from "../views/RegisterView.vue";
import LoginView from "../views/LoginView.vue";
import MeHomeView from "../views/MeHomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/register",
      name: "register",
      component: RegisterView,
    },
    {
      path: "/login",
      name: "login",
      component: LoginView,
    },
    {
      path: "/me",
      name: "me",
      component: MeHomeView,
    },
  ],
});

router.beforeEach((to, from) => {
  if(to.name !== 'login' && to.name !== 'register') {
    console.log(to.name);
    axios.post("http://localhost:4000/authenticate/", {accessToken: localStorage.getItem("accessToken")})
        .then(message => {
          console.log(message.data.code);
          if(message.data.code === 200) {
          } else {
            console.log("here");
            return false;
          }
        })
        .catch(error => {
          console.log(error);
          return false;
        })
  }
})

export default router;

Answer 1

导航警卫支持在VUE路由器4中的承诺。问题是承诺链被打破，返回false不会影响任何内容。根据经验，每个诺言都需要束缚。

应该是：

return axios.post(...)

可以使用async..await以更可读性和较少错误的方式编写相同的功能。