什么是權限控制

在專案中，尤其是在后臺管理系統中，不同人員登陸，看到的頁面選單是不一樣的，比如，一個公司的辦公系統，老板登陸可以看到所有的頁面，而普通員工登錄可能無法看到公司業績，營收情況的頁面，比如公司的員工個人資料頁面只有人力資源部門有權利看，其他部門的員工是不允許查看公司員工資訊資料的，當然了除了頁面的權限，還會有一些按鈕級別的權限，比如一個下載按鈕，有的帳號可以用，有的人不能用，比如學校的系統，一個頁面中有一個確認成績按鈕，這個按鈕只有老師有權利點擊，其他學生登陸是無法點擊的，

所以權限控制基本可以總結為兩種情況

	1.頁面級的權限(用戶是否有權限能看到這個頁面)
	2.按鈕級的權限(用戶是否能看到或者能用頁面中的某個按鈕)

頁面級權限控制(一)

1.后端回傳路由資訊，前端存盤完整路由表：

前端拿到路由資訊采取遞回的方式動態生成頁面選單，自己本身的router.js檔案定義好頁面所有的路由，這種方式弊端很明顯，并不能實作真正的權限控制，因為如果用戶記住了某個理由，用戶不點擊選單，直接在地址欄里輸入地址，那么頁面還是可以顯示出來

2.后端回傳路由權限名，前端存盤完整路由權限表，并動態生成路由(真正的權限控制)

首先前端router.js檔案存盤的路由配置資訊會分為兩部分，分別是需要權限的和不需要權限的，
頁面一開始不能一個路由沒有，所以會有一些不需要權限的頁面，比如登錄頁，404頁面等，所以一開始直接渲染
這個不需要權限的路由表，等后臺回傳之后再把需要權限的路由加到當前路由里面形成一個全新的路由表就可以了

router.js 不需要權限的路由表

 const route = [
  {
    path: '/',
    redirect: '/login',
  },
  {
    path: '/login',
    name: '登錄頁面',
    component: ()=>import("@/views/login.vue")
  },
  {
    path: '/404',
    name: '404頁面',
    component: ()=>import("@/views/404.vue")
  },
]

router.js 需要權限的路由表
對于需要權限的頁面，我們在路由中的meta屬性里添加了一個欄位roles，表示當前路由所需要的權限.
注意這個roles并不是關鍵字，叫別的名字也行，至于meta為什么值是一個陣列，是我們考慮到將來有些頁面可能不同的權限都能看，比如普通用戶，管理員，超級管理員

export const asyncRouterMap = [
  {
    path: '/permission',
    name: 'permissionhome',
    meta: {
      icon: 'el-icon-setting',
      roles: ['admin','superadmin']
    },
    component: ()=>import("@/views/permission.vue")
 },
 {
    path: '/detail',
    name: 'detail',
    meta: {
      icon: 'el-icon-setting',
      roles: ['superadmin']
    },
    component: ()=>import("@/views/detail.vue")
 },

當用戶登錄之后，登陸介面會回傳一個權限名字的字串類似于如下結構

{
  code:200,
  success:true,
  result:{
    name:"張三",
    opid:11024,
    role:"admin"//此欄位是擁有的權限名字
  }
}

拿到這個權限名字之后，去回圈我們寫好的那個需要權限的路由表進行挨個比較,

登錄之后拿到的資訊我們一般會存盤在vuex中,因為這個資料全域都需要使用，具體怎么放到vuex中和怎么取出不做詳細描述，基礎差的先去學習vuex

新建一個js檔案
具體操作就是引入我們的異步路由表,然后做一個回圈

import  {asyncRouterMap} from "../router.js".

利用filter方法過濾出路由串列中role權限中跟我們回傳的role權限名一致的項

asyncRouterMap.filter()

將篩選之后的路由表，通過一個方法加入到當前專案的路由中，通過呼叫根路由實體的這個方法，就可以實作把任意一個路由配置加入到當前頁面路由中，由此就可以生成一個新的路由，達到了真正控制權限的目的

router.addRoutes(篩選之后的路由表)

頁面級權限控制(二)

第二種方式其實就是第一種方式的簡化版，只不過后端回傳的不是回傳權限名字了，我們前端也不在本地存盤異步路由表了，登陸成功之后直接由后端回傳異步路由表，然后前端直接通過addRoutes方法添加，

這種方式好處是減少了前端作業量，但是實際作業比較麻煩，前端每次要加權限都需要讓后端幫助添加， 因為路由表是在后端維護的，

按鈕級權限控制(一)

比如某個按鈕只有超級管理員能看到，其他權限看不到，那么按照上面第一種說法，我們從回傳資訊拿到role欄位
那么頁面中的按鈕可以這么寫

html

<button v-if="role=='superAdmin'">權限按鈕</button>

js

export default{
	computed：{
		//當然實際作業中這里一般都使用mapState
		role:this.$store.state.role
	}
}

這樣其實就能實作按鈕級別的權限控制，特殊情況如果role是陣列，那么可以用indexOf方法去查找一下權限陣列中包不包含我這個按鈕需要的權限，原理幾乎不變

按鈕級權限控制(二)

第二種方式是通過自定義指令，原理大致相同

1.首先還是取出后端回傳的權限的名字
2.全域定義一個自定義指令

Vue.directive('per', {
    bind: (el, binding, vnode) => {
    //roles是我們的權限陣列，binding.value是我們傳入自定義指令的值
    //如果找不到，那證明沒有權限，把當前元素節點移除掉
        if (roles.indexOf(binding.value)==-1) {
            el.parentNode.removeChild(el);
        }
    }

使用

//這個傳入的admin是對應上面binding.value
<div v-per="[admin]">
    admin 可見
</div>

下面是官網對于自定義指令的語法介紹，可以參照，
具體地址 https://cn.vuejs.org/v2/guide/custom-directive.html