来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（上）

动态路由(上)

配合动态路由的菜单(理论上可无限递归)

<!-- 父组件  -->
<template>
    <div class="menu">
        <el-menu
            background-color
            text-color
            active-text-color
            :router="true"
            unique-opened="false"
            :collapse="isCollapse"
            :collapse-transition="false"
            :default-active="$route.path"
        >
            <NestedMenu :menusList="menus[0].children"></NestedMenu>
        </el-menu>
    </div>
</template>

<script setup lang='ts'>
import { inject, ref, watch, onMounted,PropType} from 'vue';
import { Location, Document, Menu as IconMenu, Setting } from '@element-plus/icons'
import NestedMenu from './NestedMenu.vue'
import {useStore} from '../../store/index';
import { Entity } from '../../global';
const isCollapse = ref(false);
const activePath = ref();
const select = () => {}

const menus = useStore().getMenus
</script>

<style scoped lang="css">
.menu{
background-color: rgb(255, 255, 255);
}
</style>

上述代码是父组件，也是直接配合预定义的前端布局放置的组件，是在编写配合后端鉴权的动态路由时编写的，其中NestedMenu将实现对未知菜单级数的递归，下面的代码将展示子组件即NestedMenu

<!-- 子组件 -->
<template >
    <template v-for="(item, index) in menusList" :key="item.menuId">
        <el-sub-menu
            class
            v-if="item.children && item.children.length > 0"
            :index="item.path"
            :key="index"
        >
            <template #title>
                <span style="color: black;" slot="title">{{ item.menuName }}</span>
            </template>
            <el-menu-item-group>
                <nested-menu :menusList="item.children"></nested-menu>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item v-else :index="item.menuUrl" :key="item.menuId">
            <template #title>
                <span style="color: black">{{ item.menuName }}</span>
            </template>
        </el-menu-item>
    </template>
</template>

<script setup lang="ts">
import { ref, PropType, computed, inject, Ref, onMounted, reactive } from 'vue'
import NestedMenu from './NestedMenu.vue';
import { Entity } from '../../global';
import { log } from 'console';
const props = defineProps({
    menusList: {
        type: Array as PropType<Entity.RouterEntity[]>,
        default: () => []
    }
})
</script>

以下定义的是路由对象实体，其中内容和路由表像映射

export namespace Entity{
    export interface RouterEntity{
        menuId: number
        menuName: string
        menuUrl: string
        menuStatus: string
        children: RouterEntity[]
    }
}

我们通过后端完成鉴权登录后在，将后端返回的相应权限信息通过Pinia保留其状态，但是不以明文状态存储于浏览器本地，而是保留鉴权的token，放置在浏览器中，通过每次请求放入请求头，依赖于后端Spring Security 框架进行鉴权拦截，而前端则是通过路由守卫搭配上述菜单内容进行拦截鉴权。下文将详述如何使用路由守卫进行鉴权拦截。

vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由(下)