摘要：文章項(xiàng)目效果預(yù)覽地址項(xiàng)目開(kāi)源代碼基于模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)準(zhǔn)備工作基于模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)構(gòu)建項(xiàng)目基于模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)權(quán)限控制

文章目錄如下：
項(xiàng)目效果預(yù)覽地址
項(xiàng)目開(kāi)源代碼
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——準(zhǔn)備工作
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——構(gòu)建項(xiàng)目
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——權(quán)限控制

在我們構(gòu)建項(xiàng)目之后，現(xiàn)在開(kāi)始擼代碼了！非常抱歉拖了那么久，最近麻煩事情比較多，現(xiàn)在是終于空閑那么一點(diǎn)點(diǎn)了！在寫(xiě)這篇權(quán)限控制的時(shí)候，想了很久，不知道該如何下手才能更好的表達(dá)出來(lái)，感覺(jué)代碼有點(diǎn)繞，可能是自己對(duì)于vue不是很熟悉吧，開(kāi)文已經(jīng)說(shuō)了，這個(gè)項(xiàng)目是練手項(xiàng)目，有不足之處歡迎指出來(lái)。

先看效果圖，看看是不是你要的。

假設(shè)后臺(tái)界面是這樣

在這里值得注意的是：在未登錄的時(shí)候，本項(xiàng)目的控制邏輯是只能顯示登錄這個(gè)頁(yè)面，輸入其它鏈接也是不會(huì)跳轉(zhuǎn)的！效果如下：

按照我個(gè)人理解邏輯就是在登錄之后根據(jù)用戶(hù)信息得知對(duì)應(yīng)的權(quán)限，實(shí)際上就是控制用戶(hù)對(duì)應(yīng)的路由，從而在界面上顯示出。

例如拿上邊的圖來(lái)說(shuō)：
1.假設(shè)admin是超級(jí)管理員，那么得到的就是所有的路由，界面顯示（概況，組件，權(quán)限）
2.normal是普通管理員，只能看見(jiàn)部分，界面顯示（概況，組件）

大概的邏輯就是這樣，在獲取權(quán)限之前，肯定要先登錄，不然怎么知道你是誰(shuí)呢？你能干嘛呢？

只追求功能實(shí)現(xiàn)的，可以先隨便弄兩個(gè)輸入框加上一個(gè)確定按鈕，給確定按鈕綁定click事件。有強(qiáng)迫癥的我，還是給美化了下，然后在提交之前進(jìn)行表單驗(yàn)證，效果如下：（賬號(hào)是隨機(jī)生成的）

驗(yàn)證完成，實(shí)現(xiàn)登錄之后，我們進(jìn)行用戶(hù)信息保存操作。

this.$http.post("/login", _data).then((response) => {
    // 保存用戶(hù)信息(StoreUser/setUser)
    this.$store.dispatch("StoreUser/setUser", response.data).then(() => {
        
    });
});

登錄成功后，服務(wù)端會(huì)返回客戶(hù)的信息，用了VUEX這個(gè)狀態(tài)管理工具，優(yōu)先保存在一個(gè)用戶(hù)的狀態(tài)信息，因?yàn)橛锌赡茉诙嗵帟?huì)用到這個(gè)信息，例如個(gè)人中心等等頁(yè)面。

const state={
 "isLogin":false
};

const mutations = {
 "SET_USER":function(state,userData){
     state = _.assign(state,userData);
     Cookie.set("accountData", state);
 },
 "REMOVE_USER":function(state){
     state = _.assign(state,{
       "isLogin":false
     });
     Cookie.remove("accountData");
 }
};

const actions = {
 "setUser":function({commit},userData){
   commit("SET_USER",userData);
 },
 "removeUser":function({commit}){
   commit("REMOVE_USER");
 }
};

再將這個(gè)用戶(hù)信息保存Cookie中，用做會(huì)話(huà)處理，這樣下次打開(kāi)頁(yè)面或者刷新頁(yè)面的時(shí)候能記住用戶(hù)的登錄狀態(tài)。這里使用了js-cookie這個(gè)工具。

獲取用戶(hù)信息，就能知道這個(gè)用戶(hù)的權(quán)限范圍了，然后我們根據(jù)這個(gè)權(quán)限生成對(duì)應(yīng)的路由表

    this.$store.dispatch("StoreAddRoutes/getRoutes",_roles).then(() => {
      // 根據(jù)_roles權(quán)限生成可訪(fǎng)問(wèn)的路由表
      // 動(dòng)態(tài)添加可訪(fǎng)問(wèn)路由表
      this.$router.addRoutes(this.$store.getters.addRoutes);
      // 黑科技
      window.location.replace("/");
    });

StoreAddRoutes/getRoutes這個(gè)方法是如何呢？

const state = {
    "addRoutes": []
};
const actions = {
    "getRoutes":function({commit},roles){
        if (_.indexOf(roles, "admin") !== -1) {
            commit("SET_ROUTERS",adminRoutes());
        } else {
            commit("SET_ROUTERS",normalRoues());
        }
    }
};

通過(guò)StoreAddRoutes/getRoutes返回的路由信息this.$store.getters.addRoutes，主要是用了vue2.2.0以后新增了router.addRoutes的方法進(jìn)行動(dòng)態(tài)添加，注意addRoutes()這個(gè)方法添加是數(shù)組！

重點(diǎn)是這句：this.$router.addRoutes(this.$store.getters.addRoutes);

在actions中，我們根據(jù)權(quán)限分了adminRoutes和normalRoutes這兩個(gè)路由表，分別對(duì)應(yīng)超級(jí)管理員和普通管路員

從上面獲取可以看出由權(quán)限分出的兩個(gè)路由表，那么這兩個(gè)adminRoutes和normalRoutes是怎么來(lái)的呢？

/**
 * [AdminRouter 超級(jí)管理員]
 * @type {Array}
 */
export function adminRoutes() {
    layoutObj.children = layoutObj.children.concat([
      RoleRouter
    ]);
    return [commonRoutes(),layoutObj];
}

/**
 * [NormalRouer 普通用戶(hù)]
 * @type {Array}
 */
export function normalRoues() {
    return [commonRoutes(),layoutObj];
}

其中commonRoutes()是公共頁(yè)面，例如登錄，404等頁(yè)面

/**
 * 公共路由
 * @type {Array}
 */
export function commonRoutes() {
    return LoginRouter;
}

而layoutObj這個(gè)就是整個(gè)布局信息,包括：側(cè)邊欄SideBar，右邊幫助Help，底部Footer和中間內(nèi)容Comtainer

import LoginRouter from "@/pages/login/router.js";
import HomeRouter from "@/pages/home/router.js";
import RoleRouter from "@/pages/role/router.js";
import ModuleRouter from "@/pages/module/router.js";

const Comtainer = resolve => require(["@/components/layout/layout"],resolve);
const SideBar = resolve => require(["@/components/layout/sidebar"],resolve);
const Help = resolve => require(["@/components/layout/help"],resolve);
const Footer = resolve => require(["@/components/layout/footer"],resolve);

let layoutObj = {
    "path": "/",
    "name": "layout",
    "components": {
      "default"  : Comtainer,
      "sidebar"  : SideBar,
      "help"     : Help,
      "appFooter": Footer
    },
    "redirect": "/index",
    "children": [
        HomeRouter,
        ModuleRouter
    ]
};

看完整個(gè)路由表的信息，這樣就能很容易通過(guò)不同的權(quán)限，放置不同的頁(yè)面路由，從而進(jìn)行權(quán)限控制。

注意到上邊我提到的黑科技沒(méi)？
在動(dòng)態(tài)添加完路由表之后，進(jìn)行頁(yè)面首頁(yè)跳轉(zhuǎn)。而不是使用this.$router.push()這個(gè)方法跳轉(zhuǎn)？因?yàn)槿绻褂眠@個(gè)方法，會(huì)一直警告有重復(fù)路由的警告，看了源碼大概是因?yàn)閍ddRoutes()這個(gè)方法，框架并沒(méi)有提供刪除路由的方法，添加了就一直會(huì)存在瀏覽器中，因此用黑科技，將頁(yè)面刷新。

// 黑科技
window.location.replace("/");

router.beforeEach((to, from, next) => {
  if (Cookie.getJSON("accountData") && Cookie.getJSON("accountData").isLogin) { // 判斷是否有cookie
    next();//當(dāng)有用戶(hù)權(quán)限的時(shí)候，說(shuō)明所有可訪(fǎng)問(wèn)路由已生成 如訪(fǎng)問(wèn)沒(méi)權(quán)限的全面會(huì)自動(dòng)進(jìn)入登錄頁(yè)面
  } else if (to.path === "/login") {
    next();
  } else {
    next("/login"); //當(dāng)有用戶(hù)權(quán)限的時(shí)候，說(shuō)明所有可訪(fǎng)問(wèn)路由已生成 如訪(fǎng)問(wèn)沒(méi)權(quán)限的全面會(huì)自動(dòng)進(jìn)入404頁(yè)面
  }
});

攔截器是為了防止用戶(hù)直接輸入地址進(jìn)行跳轉(zhuǎn)，因?yàn)槟愣紱](méi)登錄，怎么可能就讓你進(jìn)行訪(fǎng)問(wèn)呢??！
當(dāng)cookie存在用戶(hù)信息的時(shí)候，說(shuō)明是登錄狀態(tài)，可以進(jìn)行正常訪(fǎng)問(wèn)，如果不是登錄狀態(tài)，那么只能跳轉(zhuǎn)到登錄狀態(tài)。

項(xiàng)目效果預(yù)覽地址
項(xiàng)目開(kāi)源代碼
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——準(zhǔn)備工作
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——構(gòu)建項(xiàng)目
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——權(quán)限控制