基於vue模塊化開發後臺系統——權限控制

文章目錄以下：
項目效果預覽地址
項目開源代碼
基於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模塊化開發後臺系統——權限控制