路由守卫实现

路由守卫

router.beforeEach((to: any, from: any, next) => {
  // 判断是否跳转到登录页
  if (to.path == "/login") {
    next(); // 直接放行，继续跳转到登录页
  } else {
    // 判断是否存在本地存储的 token
    if (localStorage.token) {
      // 判断当前用户角色是否有权限访问目标路由
      if (to.meta.role.includes(localStorage.role)) {
        next(); // 有权限，继续跳转到目标路由
      } else {
        // 没有权限，提示非法访问并跳转到登录页
        ElMessage.warning("你正在非法访问，请重新登录！");
        localStorage.clear();
        next("/login");
      }
    } else {
      // 没有 token，跳转到登录页
      next("/login");
    }
  }
});

完整代码

import { createRouter, createWebHashHistory } from "vue-router";
import { ElMessage } from "element-plus";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/login",
    },
    //登录
    {
      path: "/login",
      name: "login",
      component: () => import("../views/login/LoginPage.vue"),
    },
    //锁屏
    {
      path: "/lock",
      name: "lock",
      component: () => import("../views/login/LockPage.vue"),
    },
    // 首页
    {
      path: "/index",
      component: () => import("../views/layout/LayoutPage.vue"),
      meta: { title: "首页", role: ["super", "normal"] },
      redirect: "/index/index",
      children: [
        {
          path: "index",
          component: () => import("../views/index/IndexPage.vue"),
          meta: { role: ["super", "normal"] },
        },
      ],
    },
    // 订单管理
    {
      path: "/order",
      component: () => import("../views/layout/LayoutPage.vue"),
      redirect: "/order/order",
      meta: { title: "订单管理", role: ["super", "normal"] },
      children: [
        {
          path: "order",
          component: () => import("../views/order/OrderPage.vue"),
          meta: { role: ["super", "normal"] },
        },
      ],
    },
    // 商品管理
    {
      path: "/goods",
      component: () => import("../views/layout/LayoutPage.vue"),
      redirect: "/goods/list",
      meta: { title: "商品管理", role: ["super", "normal"] },
      children: [
        // 商品列表
        {
          path: "list",
          component: () => import("../views/goods/GoodsList.vue"),
          meta: { title: "商品列表", role: ["super", "normal"] },
        },
        // 商品添加
        {
          path: "add",
          component: () => import("../views/goods/GoodsAdd.vue"),
          meta: { title: "商品添加", role: ["super", "normal"] },
        },
        // 商品分类
        {
          path: "category",
          component: () => import("@/views/goods/GoodsCategory.vue"),
          meta: { title: "商品分类", role: ["super", "normal"] },
        },
      ],
    },
    // 店铺管理
    {
      path: "/shop",
      component: () => import("../views/layout/LayoutPage.vue"),
      meta: { title: "店铺管理", role: ["super"] },
      redirect: "/shop/shop",
      children: [
        {
          path: "shop",
          component: () => import("../views/shop/ShopPage.vue"),
        },
      ],
    },
    //账号管理
    {
      path: "/user",
      component: () => import("../views/layout/LayoutPage.vue"),
      meta: { title: "账号管理", role: ["super", "normal"] },
      redirect: "/user/list",
      children: [
        // 账号列表
        {
          path: "list",
          component: () => import("../views/user/UserList.vue"),
          meta: { title: "账号列表", role: ["super"] },
        },
        // 账号添加
        {
          path: "add",
          component: () => import("../views/user/UserAdd.vue"),
          meta: { title: "账号添加", role: ["super"] },
        },
        // 修改密码
        {
          path: "pass",
          component: () => import("@/views/user/Password.vue"),
          meta: { title: "修改密码", role: ["super"] },
        },
        // 账号信息
        {
          path: "info",
          component: () => import("@/views/user/UserInfo.vue"),
          meta: { title: "账号信息", role: ["super", "normal"] },
        },
      ],
    },
    // 销售统计
    {
      path: "/sale",
      component: () => import("../views/layout/LayoutPage.vue"),
      meta: { title: "销售统计", role: ["super"] },
      redirect: "/sale/goods",
      children: [
        // 商品统计
        {
          path: "goods",
          component: () => import("@/views/sale/GoodsPage.vue"),
          meta: { title: "商品统计", role: ["super"] },
        },
        // 订单统计
        {
          path: "order",
          component: () => import("@/views/sale/OrderPage.vue"),
          meta: { title: "订单统计", role: ["super"] },
        },
      ],
    },
  ],
});

router.beforeEach((to: any, from: any, next) => {
  // 判断是否跳转到登录页
  if (to.path == "/login") {
    next(); // 直接放行，继续跳转到登录页
  } else {
    // 判断是否存在本地存储的 token
    if (localStorage.token) {
      // 判断当前用户角色是否有权限访问目标路由
      if (to.meta.role.includes(localStorage.role)) {
        next(); // 有权限，继续跳转到目标路由
      } else {
        // 没有权限，提示非法访问并跳转到登录页
        ElMessage.warning("你正在非法访问，请重新登录！");
        localStorage.clear();
        next("/login");
      }
    } else {
      // 没有 token，跳转到登录页
      next("/login");
    }
  }
});

export default router;