vue3用户权限管理（导航栏权限控制）2

上一节我们说到，通过后端的用户权限来进行路由的动态添加，实现权限控制，这一节我们通过递归导航栏组件，实现后台权限控制导航栏，接上一节所说我们在vuex中存储了一个路由数组["/","*"]进行权限控制，这一节还是要使用这个路由数组进行导航栏的控制，开始吧。

1，下载安装element-plus

        

2，在main.ts里导入

 

3.使用element-plus的导航栏组件

         这里要注意下，导航栏的代码都要抽离出来单独进行处理

4.创建一个导航栏组件，将导航栏组件抽取出来

    在views里新建一个导航栏组件，取名NavList.vue，将我们的导航栏组件拿出来

    

 在navList组件里写如下代码，进行递归

最后我们将这个组件导入到我们的主页组件里 nav.vue

 

这样即可以实现，动态控制导航栏，从，登录--获取token---token存本地存储---vuex调用本地存储的token---在vuex里通过token获取到路由数组---在将获取到的路由数组存放在state里----在主页里获取我们定义好的动态路由----将获取到的路由数组和动态路由做筛选，选出符合数组里的路由---将处理好的路由循环到我们的路由递归组件里。这样就实现了通过后端的权限来控制导航栏.

动态路由信息

export default [
    {
        name:"首页",
        path:"/home"
    },
    {
        name:"人员管理",
        Path:"/personnel",
        children:[
            {
                name:"人员列表",
                url:"/personnel/list"
            }
        ]
    }
]

nav.vue 主页面组件，引入navlist.vue递归组件。