摘要：文章項目效果預覽地址項目開源代碼基于模塊化開發后臺系統準備工作基于模塊化開發后臺系統構建項目基于模塊化開發后臺系統權限控制

文章目錄如下：
項目效果預覽地址
項目開源代碼
基于vue模塊化開發后臺系統——準備工作
基于vue模塊化開發后臺系統——構建項目
基于vue模塊化開發后臺系統——權限控制

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

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

假設后臺界面是這樣

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

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

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

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

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

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

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

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

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中，用做會話處理，這樣下次打開頁面或者刷新頁面的時候能記住用戶的登錄狀態。這里使用了js-cookie這個工具。

獲取用戶信息，就能知道這個用戶的權限范圍了，然后我們根據這個權限生成對應的路由表

    this.$store.dispatch("StoreAddRoutes/getRoutes",_roles).then(() => {
      // 根據_roles權限生成可訪問的路由表
      // 動態添加可訪問路由表
      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的方法進行動態添加，注意addRoutes()這個方法添加是數組！

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

在actions中，我們根據權限分了adminRoutes和normalRoutes這兩個路由表，分別對應超級管理員和普通管路員

從上面獲取可以看出由權限分出的兩個路由表，那么這兩個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這個就是整個布局信息,包括：側邊欄SideBar，右邊幫助Help，底部Footer和中間內容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
    ]
};

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

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

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

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

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

項目效果預覽地址
項目開源代碼
基于vue模塊化開發后臺系統——準備工作
基于vue模塊化開發后臺系統——構建項目
基于vue模塊化開發后臺系統——權限控制