vue實現(xiàn)菜單權(quán)限控制的示例代碼

更新時間：2021年03月30日 09:25:26 作者：全能的阿豪

這篇文章主要介紹了vue實現(xiàn)菜單權(quán)限控制的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

大家在做后臺管理系統(tǒng)時一般都會涉及到菜單的權(quán)限控制問題。當(dāng)然解決問題的方法無非兩種——前端控制和后端控制。我們公司這邊的產(chǎn)品迭代速度較快，所以我們是從前端控制路由迭代到后端控制路由。下面我會分別介紹這兩種方法的優(yōu)缺點以及如何實現(xiàn)（不熟悉vue-router API的同學(xué)可以先去官網(wǎng)看一波API哈）。

我先簡單說下項目的需求：如下圖所示，有一級菜單和二級菜單，然后不同的人登錄進去會展示不同的菜單。

前端控制路由的思路：將所有的路由映射表都拿到前端來維護，就是我的router.js里面將所有的菜單path與對應(yīng)的components全部寫進去，后面我會提到全部寫進去的弊端。然后我的左側(cè)菜單寫成一個組件（sidebar.vue），在這個組件里寫一份類似這樣的data數(shù)據(jù)，然后通過登錄時獲取的level值來給data中固定的菜單加hidden，然后前端就根據(jù)hidden展示菜單。

// router.js 偽代碼
const Login = r => require.ensure([],()=>r(require('../page/login/Login.vue')),'login');
const Home = r => require.ensure([],()=>r(require('../page/Home.vue')),'home');
const Forbidden = r => require.ensure([],()=>r(require('../page/403.vue')),'forbidden');
const NotFound = r => require.ensure([],()=>r(require('../page/404.vue')),'notfound');
const Dashboard = r => require.ensure([],()=>r(require('../page/dashboard/Dashboard.vue')),'dashboard');
const SplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/SplashScreen.vue')),'splashScreen');
const AddSplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/AddSplashScreen.vue')),'addSplashScreen');

const routes = [
  {
    path: '/',
    redirect: '/login'
  },{
    path: '/login',
    component: Login
  },{
    path: '/404',
    component: NotFound
  },{
    path: '/home',
    component: Home,
    redirect: '/home/splashScreen',
    children: [
      {
        path: '/home/splashScreen',
        component: SplashScreen,
        meta: {
          title: '國服李白
        }
      },{
        path: '/home/addSplashScreen',
        component: AddSplashScreen,
        meta: {
          title: 國服呂布'
        }
      }
    ]
  }
];

下面是菜單組件的偽代碼

// sidebar.vue
<template>
  <div class="sidebar">
    <el-menu>
      ...
    </el-menu>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        routes: [
          {
           index: '1',
           title: '國服打野',
           icon: 'iconfont icon-guanggao',
           children: [
            {
             index: 'splashScreen',
             title: '李白',
             children: []
            }, 
           ]
          },
          {  
            index: '2', 
            title: '國服中單', 
            icon:'iconfont icon-tuisongguanli-',
          }
        ]
      }
    },
    methods: {
      getLevel(){
        const level = sessionStorage.getItem('level');
        if(level === '0'){
          this.routes.forEach(function(value){
            if(value.title == "國服上單"){
              value.hidden = true;
              value.children.forEach(function(value){
                if(value.title=="國服關(guān)羽"){
                  value.hidden = true;
                }
              })
            }
          })
        }else if(level === '1'){
          this.routes.forEach(function(value){
            value.hidden = true
            value.children.forEach(function(value){
              value.hidden = true;
            })
          })
        }
      }
    },
    created(){
      this.getLevel();
    }
  }
</script>

雖然說這樣可以實現(xiàn)權(quán)限功能，但有兩個問題。

session里存的是level，我們可以打開瀏覽器控制臺人為控制level，這樣就失去了權(quán)限的意義。
我們?nèi)绻涀×藀ath，可以直接在瀏覽器網(wǎng)址欄中手動輸入path，然后回車就可以看到任何頁面。這也是前端router.js寫死所有路由的弊端。

在這里面前端只是通過后端傳回的level來給router顯示/隱藏，這樣前端維護整個路由是比較復(fù)雜的而且是有重大隱患的。

現(xiàn)在呢我們來講講后端控制路由。先從操作流程來說，我們這邊加入了一個dashboard中間頁，這個頁面只展示不同level下的一級路由，通過點擊相應(yīng)的一級路由進到對應(yīng)的Page頁面，該page頁面也只展示相對應(yīng)的所有的二級路由。

這里面出現(xiàn)了兩個個新的概念叫 “動態(tài)添加路由”和“導(dǎo)航守衛(wèi)”，就是我前端router.js中只寫所有人可以訪問的路由表，比如login和404頁面等。其他所有的組件資源全部寫到一個新的components.js文件中，然后通過后端返回的menuData去映射符合components.js中的key，如果有對應(yīng)的，就把它動態(tài)添加到router中，通過addRoutes添加。動態(tài)添加路由這個方法要寫到導(dǎo)航守衛(wèi)beforeEach這個鉤子函數(shù)中。

導(dǎo)航守衛(wèi)的意思是我路由跳轉(zhuǎn)到下個頁面之前要做些什么。就是說我們登錄后會跳到dashboard頁面，在進到這個頁面之前我們需要將后端請求回來的menuData進行二次封裝，把他根據(jù)權(quán)限返回回來的data與我們前端components.js去做map匹配，將最終的數(shù)據(jù)通過addRoutes來push到我們的路由中，之后才能進到我們的dashborad頁面，再通過dashborad頁面進到對應(yīng)的page頁面，就是說我們把所有的權(quán)限控制全在dashboard頁面進入之前就做完了。

這里面還有一個小的優(yōu)化的點：當(dāng)我們通過前面說的瀏覽器菜單欄訪問到非權(quán)限頁面或者不存在的頁面時，需要根據(jù)vue-router中的匹配優(yōu)先級來最后addRoutes 404和*這個頁面，這樣就可以直接到達(dá)404頁面而非空頁面。

// components.js 所有的頁面資源 
const home = () => import('../page/Home.vue');
const splashScreen = () => import('../page/splashScreen/SplashScreen.vue');
const addSplashScreen = () => import('../page/splashScreen/AddSplashScreen.vue');
const editSplashScreen = () => import('../page/splashScreen/EditSplashScreen.vue');

export default {
  home,
  splashScreen,
  addSplashScreen,
  editSplashScreen,
  
};

// router.js 看，只寫通用的頁面是不是很清爽
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const Login = () => import('../page/login/Login.vue');
const Home = () => import('../page/Home.vue');
const Forbidden = () => import('../page/403.vue');
const Dashboard = () => import('../page/dashboard/Dashboard.vue');
const routes = [
  {
    path: '/',
    redirect: '/login'
  },{
    path: '/login',
    component: Login
  },{
    path: '/403',
    component: Forbidden
  },
  {
    path: '/dashboard',
    component: Dashboard,
  },
];
export default new Router({
  mode: 'history',
  routes: routes,
  base: __dirname,
  linkActiveClass: 'link-active'
  
})

// main.js 偽代碼 只保留具體的相關(guān)邏輯
import routeMap from './router/component.js';
const NotFound = () => import('./page/404.vue');
const formatRoutes = function (routes, routeData) {
  if (!routeData) {
    routeData = {
      name: 'home',
      path: '/home',
      // 組件匹配成功的話才可以訪問具體的頁面
      component: routeMap['home'],
      children: [],
    };
  }
  routes.length && routes.forEach(route => {
    if(route.component) {
      route.component = routeMap[route.component];
      routeData.children.push({
        path: route.path,
        name: route.index,
        component: route.component,
        meta: {
          title: route.title,
        },
      })
    }
    if (route.children && route.children.length) {
      formatRoutes(route.children, routeData);
    }
  });
  return routeData;
};

let isFetchRemote = true;

//使用鉤子函數(shù)對路由進行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
  const username = sessionStorage.getItem('username');
  if(!username && to.path !== '/login'){
    next({path: '/login'});
  }
  else if (isFetchRemote && to.path !== '/login') {
    ajaxPost('/resourceAPI/getMenuData').then(res =>{
      if (res.status === 200 && res.data.errno === 0) {
        isFetchRemote = false;
        const menuData = res.data.result;
        localStorage.setItem('menudata', JSON.stringify(menuData));
        const routeData = formatRoutes(menuData);
        resourceApp.$router.addRoutes([routeData].concat([
          {name:'404',path:'/404',component:NotFound},
          {path:'*',redirect: '/404'}]));
        resourceApp.$router.push({
          path: to.path,
          query: to.query
        });
      }
      else {
        isFetchRemote = true;
      }
      next();
    })
    .catch(err => {
      console.log(err);
    });  
  }
  else {
    next();
  }
});


const resourceApp = new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

// menuData請求數(shù)據(jù) 
// 一級菜單與二級菜單的區(qū)別是一級菜單帶有component這個值，比如下面的短信管理就是只有一級菜單
{
  "errno": 0, 
  "errmsg": "獲取權(quán)限成功", 
  "result": [
    {
      "index": "1", 
      "title": "打野位置", 
      "icon": "iconfont icon-guanggao", 
      "children": [
        {
          "index": "splashScreen", 
          "icon": "", 
          "title": "娜可露露", 
          "path": "/home/splashAdverse", 
          "component": "splashAdverse", 
          "isShow": true
        }, 
        {
          "index": "addSplashScreen", 
          "icon": "", 
          "title": "李白", 
          "path": "/home/addAdverse", 
          "component": "addAdverse", 
          "isShow": false
        }, 
        
      ]
    }, 
    {
      "index": "message", 
      "title": "國服上單", 
      "icon": "iconfont icon-duanxinguanli", 
      "path": "/home/message", 
      "component": "message", 
      "children": [
        {
          "index": "addMessage", 
          "title": "國服第一關(guān)羽", 
          "icon": "", 
          "path": "/home/addMessage", 
          "component": "addMessage", 
          "isShow": false
        }
        
      ]
    } 
  ]
}

而sidebar和dashboard這兩個組件都只需要通過session拿到后端的menudate就可以。

// dashboard 偽代碼
<template>
  <div class="nav_list">
    <div class="nav_list_item" v-for="item in navList" @click="goPage(item)">
      <i :class="item.icon"></i>
      <h2>{{item.title}}</h2>
    </div>
  </div>            
</template>

<script> 
  created(){
    const routeArr = JSON.parse(localStorage.getItem('menudata'));
    this.navList = routeArr;
  }, 
  methods: {
    goPage(item){
      // 只有一級菜單
      if(item.component){
        this.$router.push(item.path);
      }else{
        // 二級菜單的數(shù)據(jù)結(jié)構(gòu)中只在children中有path
        this.$router.push(item.children[0]['path']);
      }
    }
  }
</script>

// sidebar 偽代碼
<script>
  export default {
    data() {
      return {
        routes: [],
      }
    },
    methods: {
      bouncer(arr){
        return arr.filter(function(val){
         return !(!val || val === "");
        });
      }
    },
    created(){
      const menuData = JSON.parse(localStorage.getItem('menudata'));
      // 通過當(dāng)前router的path來map對應(yīng)的整個路由數(shù)組
      let routes = menuData.map((item)=>{

        // 只有一級路由
        if(item.component && item.path == this.$route.path){
          console.log(item)
          return item;
        }else{
          if(item.children[0]['path'] == this.$route.path){
            console.log(item)
            return item;
          }
        }
      })
      // 去掉數(shù)組中的undefined、null 等空值 假值
      this.routes = this.bouncer(routes);
    }
  }
</script>

通過這種方式來控制權(quán)限，我們?nèi)绻跒g覽器控制臺改了session中的level或者在瀏覽器導(dǎo)航欄改path，都會回歸到導(dǎo)航守衛(wèi)中，就是發(fā)請求重新獲取menuData，當(dāng)我addRoutes后如果沒有匹配到這個值就回到404，當(dāng)然通過改level也不會達(dá)到修改權(quán)限的控制，因為我們是動態(tài)獲取路由，不是之前的前端控制路由。

到此這篇關(guān)于vue實現(xiàn)菜單權(quán)限控制的示例代碼的文章就介紹到這了,更多相關(guān)vue菜單權(quán)限內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: