后臺(tái)管理配置動(dòng)態(tài)路由菜單

前段時(shí)間做一個(gè)后臺(tái)管理項(xiàng)目，因?yàn)槌?jí)管理員可以給普通管理員動(dòng)態(tài)更改權(quán)限，所以vue-element-admin里的寫死的權(quán)限路由菜單就不太適合我，自己研究了好半天，經(jīng)歷了各種死循環(huán)，終于差不多弄出了一個(gè)，可能會(huì)有點(diǎn)啰嗦

總結(jié)一下：

我這個(gè)后臺(tái)分為三個(gè)角色：超級(jí)管理員、企業(yè)管理員和普通管理員。其中，超級(jí)管理員可以查看所有的路由菜單，企業(yè)管理員也是固定的幾個(gè)菜單，所以，超級(jí)管理員和企業(yè)管理員是我在前端寫好的路由菜單里直接配置的權(quán)限，而普通管理員是不固定的，需要后臺(tái)給我返回?cái)?shù)據(jù)，自己拼接。

1、首先我們需要有一個(gè)登錄的頁(yè)面，簡(jiǎn)單點(diǎn)的，用戶名和密碼還有一個(gè)登錄按鈕就可以了，我用的是vue-element-admin的模板，它已經(jīng)寫好了，直接拿來(lái)用就可以

2、自己在src-api文件夾中新建一個(gè)js文件來(lái)寫自己的登錄、獲取用戶信息、登出等接口(也可以換掉之前的模擬接口，在api/user.js文件)。

3、點(diǎn)擊登錄按鈕，這時(shí)會(huì)在這個(gè)方法里面調(diào)用store-modules-user.js里的login方法，如下：

4、store-modules-user.js里的login方法就是調(diào)用了自己的登錄接口，當(dāng)然，調(diào)用之前記得先引入文件

上面是我引入的登錄、獲取用戶信息、登出的接口

5、調(diào)用登錄接口后store存儲(chǔ)返回的token等數(shù)據(jù)(根據(jù)自己的需求來(lái)，因?yàn)槲液笃谛枰脩鬷d，所以也把用戶id存進(jìn)了store里)

6、這時(shí)調(diào)用同頁(yè)面的getInfo方法，當(dāng)然，這個(gè)方法里也同樣調(diào)用了獲取用戶信息的接口，這步是為了獲取到登錄的用戶的角色，調(diào)用之后，將返回的用戶角色名等存到store里(我還存了其它的數(shù)據(jù)，還是那句話，哪些數(shù)據(jù)需要就存哪些)

*** 這里當(dāng)時(shí)我出了一個(gè)bug：當(dāng)我登錄進(jìn)去之后刷新頁(yè)面又跳到了登錄的頁(yè)面，說(shuō)明有關(guān)鍵的數(shù)據(jù)沒(méi)有存儲(chǔ)上，上網(wǎng)一找，token在登錄調(diào)用登錄接口后已經(jīng)用cookie存入了瀏覽器，那應(yīng)該就是我只把id存進(jìn)了store而沒(méi)有存入瀏覽器，才導(dǎo)致一刷新就失去了id，所以我用localStorage/sessionStorage存入了id，在getInfo里才獲取本地存儲(chǔ)的id在存儲(chǔ)到store中

 7、由于普通管理員的路由菜單是后臺(tái)返給我的，所以，在getInfo這個(gè)方法中，我也直接調(diào)用了獲取路由菜單的接口，將返回的數(shù)據(jù)通過(guò)拼接來(lái)生成一個(gè)完整的路由菜單，最后將這個(gè)路由菜單數(shù)組保存在store中

注：路由菜單最后一定要放404，格式 ：{ path: '*', redirect: '/404', hidden: true } ,切記一定要放在最后?。?！

8、接下來(lái)是去src/permission.js中調(diào)用store-modules-user.js里的getInfo方法，這塊與模板的代碼沒(méi)有區(qū)別，所以就不多敘述。在此方法中調(diào)用了store-modules-permission.js里的generateRoutes的方法

 我們?nèi)フ乙幌逻@個(gè)方法，這個(gè)方法其實(shí)是根據(jù)傳過(guò)來(lái)的role來(lái)判斷它能看到的路由菜單。模板里原來(lái)的方法是根據(jù)角色和寫好的路由菜單一一比較，最后把對(duì)應(yīng)上權(quán)限的項(xiàng)放進(jìn)一個(gè)數(shù)組里，我這里的超級(jí)管理員和普通管理員因?yàn)闄?quán)限和路由菜單固定，所以直接套用的代碼。而普通管理員，則是調(diào)用保存在store里的路由菜單數(shù)組，然后賦值給定義好的變量

之后需要更改的地方就沒(méi)有了，就可以測(cè)試登錄了。

這里我犯了一個(gè)比較大的bug：

當(dāng)以普通管理員登錄的時(shí)候，我進(jìn)去之后菜單顯示正常，可是當(dāng)我不管點(diǎn)擊哪個(gè)菜單，都給我跳到了404 。經(jīng)過(guò)一番測(cè)試與排查，我找到了解決方法，是加一個(gè)延時(shí)器，加在generateRoutes方法的這個(gè)地方

之后就運(yùn)行成功了，但是具體原因我其實(shí)不太明白，因?yàn)槲襝onsole.log(accessedRoutes) 出來(lái)的也是正常的路由菜單

這就是大體的配置動(dòng)態(tài)路由菜單的過(guò)程，作為第一次配置成功的心得。

根據(jù)權(quán)限生成動(dòng)態(tài)路由及導(dǎo)航菜單

最近在做一個(gè)后臺(tái)管理項(xiàng)目，涉及到一些菜單權(quán)限控制，具體實(shí)現(xiàn)如下：（話不多說(shuō)，直接上代碼）

router/index.js

const Home = resolve => require(['@/views/common/Home.vue'], resolve);
const AAA = resolve => require(['@/views/page/AAA.vue'], resolve);
const BBB = resolve => require(['@/views/pages/BBB.vue'], resolve);
const CCC= resolve => require(['@/views/pages/CCC.vue'], resolve);
let routes = [{
    path: '/',
    component: Home,
    name: '首頁(yè)',
    redirect: '/AAA',
    hidden: true,
    mate: {
      icon: 'fa fa-home',
      index: 'AAA'
    },
    children: [{
      path: '/AAA',
      component: AAA,
      name: '主頁(yè)'
    }]
  }]
//從服務(wù)器獲取路由,進(jìn)行拼接,所有模塊不再以import的形式引入,只能通過(guò)require方式加載!
export const makeRoute = function (items) {
  let routes = [];
  for (var i = 0; i < items.length; i++) {
    // console.log(items[i]);
    items[i] = formatRoute(items[i]);
    if (items[i].children) {
      //遞歸處理子路由的component
      items[i].children = makeRoute(items[i].children);
    }
  }
  return items;
}
//格式化路由,使component掛載到路由上,生成addRoutes可用的格式
const formatRoute = (item) => {
  let route = item;
  route.component = eval(route.component);
  return route;
}
export default routes;

main.js(登錄成功時(shí)，后臺(tái)返回有權(quán)限的路由并存在狀態(tài)管理器vuex中)

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import axios from 'axios'
import store from './store'
import routes from './router/index'
import { makeRoute } from './router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  
    //如果目標(biāo)路由為登陸時(shí),恢復(fù)用戶原始狀態(tài)
    if (to.path === '/login') {
      window.clearInterval(window.interval);
      store.commit('logOut');
    }
    let allRoutes = store.getters.allRoutes;
    let loginStatus = store.getters.loginStatus;
  
    //登錄成功時(shí)加載路由及模塊
    if (from.path === '/login' && allRoutes !== '' && loginStatus) {
      let routesObj = makeRoute(store.getters.allRoutes);
      router.addRoutes(routesObj);
    }
    //沒(méi)有登錄時(shí)自動(dòng)跳轉(zhuǎn),開(kāi)發(fā)環(huán)境免登陸時(shí)注釋
    if ( to.path !== '/login' && (allRoutes === '' || !loginStatus)) {
      if(sessionStorage.getItem('userInfo') === null){  
        next({ path: '/login' })
      } else {  
        //刷新當(dāng)前頁(yè)面
        //重置store參數(shù)
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        store.commit('setUser', userInfo);
        if(userInfo.routes){
          //重新加載路由及模塊
          let routesObj = makeRoute(userInfo.routes);
          router.addRoutes(routesObj);
        }
        next({path: to.path, query: to.query});
      }
    }else{
      //路由的next必須存在,否則無(wú)法進(jìn)入下一頁(yè)
      next();
    }
  })

備注：此方案最大的好處是不用再使用require引入每一個(gè)組件并掛載到路由

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論