vue router权限管理如何实现不同角色显示不同路由

这篇文章给大家分享的是有关vue router权限管理如何实现不同角色显示不同路由的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

思路：

1. login页面登录时 加上角色的标记，存储到本地缓存（localstorage）

2. 路由js文件，meta属性加个是否可见（visiable true或false）

3. home 基本导航栏页面逻辑,首先 可以获得到 所有一级菜单和角色标记

1. for 循环一级菜单

2. 找出角色 所在的 角色数组(判断某个值在不在 数组中)

3. 然后 所在的数组 visiable 改为true ，其他的改为false

ui框架 是ant design of vue

主要逻辑代码

1-登录页面

2- 路由页面

3- home 菜单栏公用页面

全部页面代码

1. 登录页面

2. 路由js文件

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({  routes: [      //一级路由  {    path: "/login",    name: "Login",    meta: { requireAuth: false },    component: require("@/view/Login").default,  },    // 提供页面框架    {    path: "/",    name: "Home",    meta: { requireAuth: true },    component: require("@/view/Home").default,    redirect: "/index",    children:[       {        path: '/HelloWorld',        name: 'HelloWorld',        component: HelloWorld,        meta: {requireAuth: false,  visiable: true,roles: ['superadmin','admin','user']}      },      {        path: '/SuperAdmin',        name: 'SuperAdmin',        component: () => import("@/view/SuperAdmin.vue"),        meta: {requireAuth: false,  visiable: true, roles: ['superadmin']}      },      {        path: '/Admin',        name: 'Admin',        component: () => import("@/view/Admin.vue"),        meta: {requireAuth: false, visiable: true, roles: ['admin']}      },      {        path: '/User',        name: 'User',        component: () => import("@/view/User.vue"),        meta: {requireAuth: false,  visiable: true,roles: ['user']}      },    ],    }  ]})

3. home公用菜单栏页面(ui框架 是ant design of vue)

项目目录

感谢各位的阅读！关于"vue router权限管理如何实现不同角色显示不同路由"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！