vue-router 重定向到登录。即使路径不受保护，它也会将我重定向到登录页面

Question

import {
  createRouter,
  createWebHistory
} from "vue-router";
import Home from "../views/Home.vue";
import PublicPage from "../views/public.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [{

      path: "/public",
      name: "PublicPage",
      component: PublicPage,
      meta: {
        requiresAuth: false, // No authentication required
        roles: [], // No specific roles required
      },

      path: "/",
      name: "Home",
      component: Home,
      props: true,
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin", "Viewer"],
      },
    },
    {
      path: "/test",
      component: () => import("../views/Test.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin", "Viewer"],
      },
    },
    {
      path: "/map",
      component: () => import("../views/Map.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin", "Viewer"],
      },
    },
    {
      path: "/contact",
      component: () => import("../views/Contact.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin", "Viewer"],
      },
    },
    {
      path: "/users",
      component: () => import("../views/Users.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin"],
      },
    },
    {
      path: "/support",
      component: () => import("../views/Support.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin", "Viewer"],
      },
    },
    {
      path: "/settings",
      component: () => import("../views/Settings.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin"],
      },
    },
    {
      path: "/assets",
      component: () => import("../views/Assets.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin"],
      },
    },
    {
      path: "/alerts",
      component: () => import("../views/Alerts.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin"],
      },
    },
    {
      path: "/clients",
      component: () => import("../views/Clients.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin"], //only super admin have access to the company list
      },
    },
    {
      path: "/labels",
      component: () => import("../views/Labels.vue"),
      meta: {
        requiresAuth: true,
        roles: ["Super Admin", "Admin"],
      },
    },
    {
      path: "/login",
      name: "Login",
      component: () => import("../views/authentication/Login.vue"),
    },
    {
      path: "/register",
      name: "Register",
      component: () => import("../views/authentication/Activate.vue"),
    },
  ],
});

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token");
  if (to.meta.requiresAuth && !token) {
    next({
      name: "Login"
    });
  } else if (token) {
    const userRole = localStorage.getItem("role"); // implement this function to get the user's role from the backend
    const authorizedRoles = to.meta.roles;
    if (authorizedRoles && authorizedRoles.length && authorizedRoles.includes(userRole)) {
      next();
    } else {
      next({
        name: "Home"
      }); // or redirect to a 403 page
    }
  } else {
    next();
  }
});

export default router;

即使我输入不需要身份验证的 /public 或 /register 链接，它仍然会重定向到 /login。当我第一次开发它时，它工作得很好。最近我通过 npm update 更新了我的项目。 console.log(to.meta.requiresAuth) 返回未定义，console.log(to.name) 返回登录。我没有在其他地方为这个项目定义任何重定向或重写规则。

Answer 1

Public 和 Home 位于同一个对象中。所以 Home 会删除并覆盖 Public。

Home 还需要经过身份验证并具有角色。

当您输入像 /register 这样的路线时，该路线是公开的并且您有一个令牌

• if (to.meta.requiresAuth && !token)

  => 假

• else if (token)

  => 正确
• • 您检查您的角色是否处于未定义（/register 没有角色数组）。 您将被重定向到/home 由于 /home 要求您登录，因此您将被重定向到登录。

您应该首先在公共路线和家庭路线之间添加

},{

，然后执行类似的操作：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token");

  if (to.meta.requiresAuth && !token) {
    next({
      name: "Login"
    });
    return;
  }

  const authorizedRoles = to.meta.roles;
  const userRole = localStorage.getItem("role");
  if (!authorizedRoles || !authorizedRoles.length || authorizedRoles.includes(userRole)) {
    next();
    return;
  }
  
  next({
    name: "Home"
  }); // or redirect to a 403 page
});