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. 登录页面

<template> <div class='container'>   <div class="bg-image">                <p @click="demo">登录</p>         </div>   </div> </template> <script> export default {   name: "",   data() {     return {       role:'user'     };   },   methods: {         demo(){     if (this.role === 'superadmin') {         window.localStorage.setItem('roles','superadmin')       } else if (this.role === 'admin') {         window.localStorage.setItem('roles','admin')               } else if (this.role === 'user') {         window.localStorage.setItem('roles','user')               }     }   }, }; </script> <style scoped> </style>

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)

<template>   <a-layout id="components-layout-demo-custom-trigger">     <a-layout-sider v-model="collapsed" :trigger="null" collapsible>       <div class="logo">         <span class="anticon">           <!-- <img src="../assets/image/logo.png" alt="" /> -->         </span>         <p v-if="!collapsed">项目名</p>       </div>       <a-menu         theme="dark"         mode="inline"         :defaultSelectedKeys="[current]"         :selectedKeys="[current]"         @click="handleClick"         @openChange="onOpenChange"         :open-keys="openKeys"       >         <template v-for="item in menuList">           <!-- 有一级以上 -->           <a-sub-menu             :key="item.path"             v-if="item.children != undefined && item.meta.visiable"           >             <p slot="title">               <span class="anticon"> <a-icon :type="item.meta.icon" /> </span>               <span>{{ item.name }} </span>             </p>             <!-- 二级页面  -->             <template v-for="child in item.children">               <a-menu-item :key="child.path" v-if="child.meta.visiable">                 <p class="ciclebox">                   <span> {{ child.name }}</span>                 </p>               </a-menu-item>             </template>           </a-sub-menu>           <!-- 普通只有一级的页面 -->           <a-menu-item             :key="item.path"             v-if="item.children == undefined && item.meta.visiable"           >             <a-icon :type="item.meta.icon" />             <span>{{ item.name }}</span>           </a-menu-item>         </template>       </a-menu>     </a-layout-sider>     <a-layout :>       <a-layout-header >         <div class="headerflex">           <a-icon             class="trigger"             :type="collapsed ? 'menu-unfold' : 'menu-fold'"             @click="() => (collapsed = !collapsed)"           />           <div class="app-header-right">             <a-menu mode="horizontal" @click="handleClickLogin">               <a-sub-menu>                 <span class="app-user-avatar" slot="title">                   <a-avatar                     size="small"                     src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"                   />                   <!-- 用户名 -->                   <!-- {{ User ? User.username : "" }} -->                   <a-icon type="down" class="icon" />                 </span>                 <!-- <a-menu-item key="/setting/password"                   ><a-icon type="lock" key="password" />修改密码                 </a-menu-item> -->                 <a-menu-item key="/login"                   ><a-icon type="poweroff" />退出登录                 </a-menu-item>               </a-sub-menu>             </a-menu>           </div>         </div>       </a-layout-header>       <a-layout-content >         <!-- 这里显示页面内容 -->         <router-view></router-view>       </a-layout-content>     </a-layout>   </a-layout> </template> <script> import routes from "../router"; export default {   name: "Home",   components: {},   data() {     return {       collapsed: false,       menuList: [], //菜单循环列表       subList: [], // 二级子菜单       type: "", // 请求参数type类型       typeshow: false, // false 没提醒 true 有提醒       current: this.$route.path,       openKeys: [],       rootSubmenuKeys: [],       flag: false,       fullWidth: document.documentElement.clientWidth,       // 消息提醒       num: "", // 回收员审核       ordernum: "", // 订单列表       cycleordernum: "", // 周期回收列表       promoterverify: "", // 推广审核       userwithdraw: "", // 会员提现审核       recyclewithdraw: "", // 回收员提现审核       promotionwithdraw: "", // 推广员提现审核       roles:'', // 角色显示     };   },   created() {      let that = this;     this.menuList = routes.options.routes[1].children;     console.log(this.menuList, "一级菜单");     this.rootSubmenuKeys = this.menuList;     this.roles = window.localStorage.getItem('roles');     this.menuList.forEach(element => {         // 1- for 循环一级菜单         // 2-找出角色 所在的 角色数组(判断某个值在不在 数组中)         // 3- 然后 所在的数组 visiable 改为true ，其他的改为false             element.meta.roles.forEach(item => {                 if( item.includes(that.roles)){                     // 存在                      element.meta.visiable = true                 } else {                     // 不存在                     element.meta.visiable = false                 }                          });     });   },   mounted() {     //监听屏幕宽度     const that = this;     window.onresize = () => {       return (() => {         window.fullWidth = document.documentElement.clientWidth;         that.fullWidth = window.fullWidth;       })();     };   },   methods: {     onOpenChange(openKeys) {       // 最新的key值       const latestOpenKey = openKeys.find(         (key) => this.openKeys.indexOf(key) === -1       );       if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {         this.openKeys = openKeys;       } else {         this.openKeys = latestOpenKey ? [latestOpenKey] : [];       }     },     handleClick(e) {       //如果key为路由则跳转       this.current = e.key;       if (e.key.indexOf("/") > -1) {         this.$router.push(e.key).catch(() => {});       }     },     // 退出登录     handleClickLogin(e) {       this.current = e.key;       this.openCurrent = e.key;       if (e.key == "/login") {         localStorage.clear();         setTimeout(() => {           this.$router.replace({ path: "/logout", name: "Login" });         }, 300);       }     },   }, }; </script> <style> /* 退出登录 */ .headerflex {   display: flex;   align-items: center;   justify-content: space-between; } .rights {   padding: 0 24px; } #components-layout-demo-custom-trigger .trigger {   font-size: 18px;   height: 60px !important;   line-height: 60px !important;   padding: 0 24px;   cursor: pointer;   transition: color 0.3s; } #components-layout-demo-custom-trigger .trigger:hover {   color: #1890ff; } #components-layout-demo-custom-trigger .logo {   height: 52px;   margin: 16px 16px 10px;   display: flex;   align-items: center; } #components-layout-demo-custom-trigger .logo img {   width: 30px;   height: 30px;   margin-right: 10px; } #components-layout-demo-custom-trigger .logo p {   color: #fff;   margin-bottom: 0;   font-size: 16px;   font-weight: 700; } .ciclebox {   position: relative; } .ciclered {   position: absolute;   right: 0;   top: 50%;   transform: translateY(-50%);   display: inline-block;   width: 15px;   height: 15px;   border-radius: 50%;   text-align: center;   line-height: 15px;   background-color: #e72c0b;   color: #fff;   font-size: 12px; } .icon {   padding-left: 10px; } .app-header-right .ant-menu-horizontal {   line-height: 60px !important; } .app-user-avatar img{     width:20px;     height:20px; } * p {     margin-bottom: 0 !important; } * ul, * li {     padding: 0;     margin: 0;     list-style: none; } .ant-card-body {     padding-top: 20px; } .change-inline {     display: inline-block; } .container .page-header {     height: 84px;     padding: 16px;     background-color: #fff; } .container .page-header h4 {     font-size: 20px;     padding-top: 8px;     font-weight: 600; } .container .claear-top-height {     height: auto !important; } .container .infomation-box-top {     margin-top: 10px; } .container .infomation-box-top h4 {     font-weight: 600;     margin-bottom: 14px; } .container .infomation-box-top p {     margin-bottom: 0;     line-height: 38px;     color: #4b4b4b; } .container .infomation-box-top .status-identity {     height: 108px;     display: flex;     align-items: flex-end;     justify-content: center; } .container .infomation-box-top .status-identity .type-title {     color: #666666;     font-weight: 600; } .container .infomation-box-top .status-identity p {     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; } .container .infomation-box-top .status-identity .set-width {     width: 80%; } .container .infomation-box-top .status-identity .set-width .add-right-border {     height: 76px;     border-right: 2px solid #F4F4F4; } .container .infomation-box-top .status-identity .set-width .add-right-border span {     font-weight: 600; } .container .infomation-box-top .status-identity .set-width .add-right-border .money-edit {     display: flex;     align-items: center;     justify-content: space-between; } .container .infomation-box-top .status-identity .set-width .add-right-border .anticon {     margin-right: 10% !important; } .container .infomation-box-top .status-identity .set-width .add-right-border .edit-icon-color {     color: #2B85E4; } .container .set-flex-end {     display: flex;     justify-content: flex-end;     margin-bottom: 16px; } .container .set-flex-end .button-group {     display: flex;     align-items: center; } .container .set-flex-end .button-group .search {     margin-right: 16px; } .container .table-style .recommender {     text-decoration: underline;     color: #2B85E4; } .container .table-style .table-role {     margin-bottom: 0;     cursor: default; } .container .table-style .role-r {     color: #19BE6B; } .container .table-style .role-s {     color: #FF9900; } .container .table-style .role-t {     color: #2B85E4; } .container .table-style .role-w {     color: #F56C6C; } .container .table-style .role-c {     color: #8b8b8b; } .container .table-style .text-detail {     color: #409EFF;     padding: auto 10px !important; } .container .table-style .addleft-padding {     padding-left: 10px; } .container .table-style .order-to {     color: #409EFF;     padding-left: 10px !important; } .container .table-style .text-stop {     color: #F56C6C;     padding-left: 10px !important; } .container .table-style .text-stopis {     color: #2fc25b;     padding-left: 10px !important; } .container .pagination-margin {     margin-top: 25px;     display: flex;     justify-content: flex-end; } .container .ant-tabs-bar {     padding-left: 30px;     background: #fff;     font-weight: 600;     margin: 0 0 26px !important; } .container .ant-tabs-nav {     font-size: 15px !important; } .container .ant-tabs-nav .ant-tabs-tab {     margin-right: 0 !important;     padding-bottom: 20px; } .container .tab-pane-set {     padding: 0 2%; } .container .ant-card-head-title {     padding: 0px;     min-height: 44px !important;     line-height: 44px;     font-size: 15px;     font-weight: 600;     color: #6b6b6b; } .padbox {     margin-left: 10px; } .appoint {     background: #e72c0b;     color: #e72c0b !important; } .wait {     background: #ff9900;     color: #ff9900 !important; } .pass {     background: #2fc25b;     color: #2fc25b; } .success {     background: #409eff;     color: #409eff !important; } .cancel {     background: #8b8b8b;     color: #8b8b8b; } .red {     color: #e72c0b !important; } .appoint_cl {     color: #e72c0b !important; } .wait_cl {     color: #ff9900 !important; } .pass_cl {     color: #2fc25b !important; } .success_cl {     color: #409eff !important; } .cancel_cl {     color: #8b8b8b !important; } .clear-bg {     background: none !important; } </style>

项目目录

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