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

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

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

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

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

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

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

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

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

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

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

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

登錄成功后，服務(wù)端會返回客戶的信息，用了VUEX這個狀態(tài)管理工具，優(yōu)先保存在一個用戶的狀態(tài)信息，因為有可能在多處會用到這個信息，例如個人中心等等頁面。

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");
 }
};

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

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

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

StoreAddRoutes/getRoutes這個方法是如何呢？

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

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

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

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

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

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

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

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

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

而layoutObj這個就是整個布局信息,包括：側(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
    ]
};

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

注意到上邊我提到的黑科技沒？
在動態(tài)添加完路由表之后，進行頁面首頁跳轉(zhuǎn)。而不是使用this.$router.push()這個方法跳轉(zhuǎn)？因為如果使用這個方法，會一直警告有重復(fù)路由的警告，看了源碼大概是因為addRoutes()這個方法，框架并沒有提供刪除路由的方法，添加了就一直會存在瀏覽器中，因此用黑科技，將頁面刷新。

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

router.beforeEach((to, from, next) => {
  if (Cookie.getJSON("accountData") && Cookie.getJSON("accountData").isLogin) { // 判斷是否有cookie
    next();//當(dāng)有用戶權(quán)限的時候，說明所有可訪問路由已生成 如訪問沒權(quán)限的全面會自動進入登錄頁面
  } else if (to.path === "/login") {
    next();
  } else {
    next("/login"); //當(dāng)有用戶權(quán)限的時候，說明所有可訪問路由已生成 如訪問沒權(quán)限的全面會自動進入404頁面
  }
});

攔截器是為了防止用戶直接輸入地址進行跳轉(zhuǎn)，因為你都沒登錄，怎么可能就讓你進行訪問呢??！
當(dāng)cookie存在用戶信息的時候，說明是登錄狀態(tài)，可以進行正常訪問，如果不是登錄狀態(tài)，那么只能跳轉(zhuǎn)到登錄狀態(tài)。

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