<!-- 父组件 -->
<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 框架进行鉴权拦截,而前端则是通过路由守卫搭配上述菜单内容进行拦截鉴权。下文将详述如何使用路由守卫进行鉴权拦截。