vue项目权限控制

实现 vue 动态路由的测试，登录 user 和 admin 可以访问不同的菜单

router/index.ts

import { createWebHashHistory, createRouter, RouteRecordRaw } from "vue-router"

// 静态路由
const routes: RouteRecordRaw[] = [
  {
    name: "home",
    path: "/",
    meta: { label: "首页" },
    component: () => import("../pages/home.vue"),
  },
  {
    name: "login",
    path: "/login",
    meta: { label: "登录" },
    component: () => import("../pages/login.vue"),
  },

  {
    name: "disboard",
    path: "/disboard",
    meta: { label: "工作台" },
    component: () => import("../pages/disboard.vue"),
  },
]

// 动态路由
const dynamicRoutes: RouteRecordRaw[] = [
  {
    name: "list",
    path: "/list",
    meta: { label: "列表", roles: ["admin", "user"] },
    component: () => import("../pages/list.vue"),
  },
  {
    name: "about",
    path: "/about",
    meta: { label: "关于", roles: ["admin", "user"] },
    component: () => import("../pages/about.vue"),
  },
  {
    name: "user",
    path: "/user",
    meta: { label: "用户", roles: ["admin", "user"] },
    component: () => import("../pages/user.vue"),
    children: [
      {
        name: "user-info",
        path: "/user/info",
        meta: { label: "用户info", roles: ["admin", "user"] },
        component: () => import("../pages/user-info.vue"),
        children: [
          {
            name: "user-info.a",
            path: "/user/info/a",
            meta: { label: "用户info.a", roles: ["admin", "user"] },
            component: () => import("../pages/user-info-a.vue"),
          },
          {
            name: "user-info.b",
            path: "/user/info/b",
            meta: { label: "用户info.b", roles: ["admin", "user"] },
            component: () => import("../pages/user-info-b.vue"),
          },
        ],
      },
      {
        name: "user-orders",
        path: "/user/orders",
        meta: { label: "用户orders", roles: ["user"] },
        component: () => import("../pages/user-orders.vue"),
      },
    ],
  },
]

// routes 扁平化处理
const loopRoutes = (routes: RouteRecordRaw[], role: string = "") => {
  const result: RouteRecordRaw[] = []
  const loopChildren = (children: RouteRecordRaw[] = [], parent: string = "") => {
    children.forEach((item) => {
      if (item.children) {
        const { children, ...rest } = item
        if (!rest.meta?.roles || (rest.meta?.roles as string[]).includes(role)) {
          result.push(rest)
          if (!router.hasRoute(item.name!)) {
            if (parent) {
              router.addRoute(parent, rest)
            } else {
              router.addRoute(rest)
            }
          }
        }
        loopChildren(children, rest.name as string)
      } else {
        // meta信息中没有roles或者meta信息中roles包含当前登录用户的role
        if (!item.meta?.roles || (item.meta?.roles as string[]).includes(role)) {
          result.push(item)
          if (!router.hasRoute(item.name!)) {
            if (parent) {
              // 有父级
              router.addRoute(parent, item)
            } else {
              router.addRoute(item)
            }
          }
        }
      }
    })
  }
  loopChildren(dynamicRoutes)
  console.log(result)
  return [...routes, ...result].filter((item) => item.name !== "login")
}

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

export { routes, loopRoutes }

App.vue

<script setup lang="ts">
  import { provide, ref, watch } from "vue"
  import router, { routes } from "./router"
  const showRoutes = ref(routes)
  provide("showRoutes", showRoutes)
  const logout = () => {
    location.href = "/"
  }
  watch(showRoutes, () => {
    console.log(router.getRoutes()) // 查看当前路由列表
  })
</script>

<template>
  <router-link v-for="route in showRoutes" :key="route.name" :to="{ name: route.name }">
    【{{ route.meta?.label }}】
  </router-link>
  <button @click="logout">退出登录</button>
  <hr />
  <router-view></router-view>
</template>

<style scoped></style>

<script lang="ts" setup>
  import { inject, Ref } from "vue"
  import { loopRoutes, routes } from "../router"

  const showRoutes = inject("showRoutes") as unknown as Ref
  const login = (userType: string) => {
    showRoutes.value = loopRoutes(routes, userType)
  }
</script>

<template>
  login.vue
  <button @click="login('user')">用户登录</button>
  <button @click="login('admin')">admin登录</button>
</template>

<style scoped lang="scss"></style>

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。