一、前言

在廣告機項目中，角色的權限管理是卡了挺久的一個難點。首先我們確定的權限控制分為兩大部分，其中根據(jù)粒的大小分的更細：

1、接口訪問的權限控制

2、頁面的權限控制

下面我們就看一看是如何實現(xiàn)這些個權限控制的。

二、接口訪問的權限控制

接口權限就是對用戶的校驗。正常來說，在用戶登錄時服務器需要給前臺返回一個Token,然后在以后前臺每次調用接口時都需要帶上這個Token,然后服務端獲取到這個Token后進行比對，如果通過則可以訪問。

現(xiàn)有的做法是在登錄成功的回調中將后臺返回的Token直接存儲到sessionStorag​e，然在請求時將Token取出放入headers中傳給后臺，代碼如下：

this.$http({     method: 'get',     url: 'test/query?id=20',     withCredentials: true,     headers: {      token: sessionStorage.getItem('token'),      name: sessionStorage.getItem('name')  //應后臺需求傳的用戶名     }    }).then(response => {     //請求成功后的操作    })

后來在一些文章中發(fā)現(xiàn)axios可以在攔截器中直接將Token塞入config.headers.Authorization中，作為全局傳入。下面是代碼部分：

//main.jsimport axios from 'axios'// 實例化Axios，并進行超時設置const service = axios.create({  timeout: 5000})// baseURL// axios.defaults.baseURL = 'https://api.github.com';// http request 攔截器// 每次請求都為http頭增加Authorization字段，其內容為tokenservice.interceptors.request.use(  config => {    if (store.state.user.token) {      config.headers.Authorization = `token ${store.state.user.token}`;    }    return config  },  err => {    return Promise.reject(err)  });export default service

三、頁面權限控制

在前面已經(jīng)說到，頁面權限控制又分為兩種：

這些權限一般是在固定頁面進行配置，保存后記錄到數(shù)據(jù)庫中。

按鈕權限暫且不提，頁面訪問權限在實現(xiàn)中又可以分為兩種方式：

既然展現(xiàn)出來后不能點，那算幾個意思，逗我玩兒呢？所謂眼不見為凈，綜合考慮后，肯定是方案二比較符合良好的用戶體驗。

好，我們現(xiàn)在梳理一下大致的頁面訪問權限的流程：

在這里插入圖片描述

在對流程梳理完成后我們開始進行詳細的編寫。

1、創(chuàng)建路由表

創(chuàng)建路由表實際上沒有什么難度，照著vue-router官方文檔給的示例直接寫就行了。但是因為有部分頁面是不需要訪問權限的，所以需要將登錄、404、維護等頁面寫到默認的路由中，而將其它的需要權限的頁面寫到一個變量或者一個文件中，這樣可以有效的減輕后續(xù)的維護壓力。