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

.menu{
background-color: rgb(255, 255, 255);
}

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

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

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

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