用Vue2.5和Elemnt-ui2搭建一個後臺模版:提升篇（2 登陸、權限）

權限控制

系統權限控制流程

1. 登陸、請求攔截 1.1 在路由跳轉前（router.beforeEach）的鉤子中，獲取LocalStorage是否有token值，若是沒有直接跳轉登陸頁，若是有將跳轉到home頁面，

router.beforeEach((to, from, next) => {
  NProgress.start()            // 開啓Progress
  if (localStorage.getItem('Authorization')) {
    /** 在路由跳轉前判斷，store內是否有用戶信息， 若是store內沒有用戶信息，在這裏發請求， 而且拉取用戶信息，存如store內， 這樣將保證，每次刷新頁面會拿到最新的用戶信息 */
  } else {
    next('/login')
  }
})

複製代碼

1.2 用戶根據賬號密碼進行系統登陸，登陸成功後後端返回一個tkoen，把token存在本地LocalStorage中。

1.3 axios攔截器中，每次從本地LocalStorage取到以前存的token值，在每次請求發出以前添加到header的Authorization屬性中。

// request 請求發送以前 攔截器
service.interceptors.request.use(config => {
  const Authorization = getLocalStorage('Authorization')
  if (Authorization) {
    config.headers.Authorization = Authorization  // 讓每一個請求攜帶token--['Authorization']
  }
  return config
}, error => {
  // Do something with request error
  console.log(error)
  Promise.reject(error)
})
複製代碼

1.2 axios攔截器中，每次請求收到後，根據以前的接口約定，進行攔截處理

// request 請求收到後 攔截器設置
service.interceptors.response.use(
  response => {
    if (response) {
      switch (response.data.code) {
        case 'H0000':
          break
        case 'B1000':                                  // 返回 B1000 清除token信息並跳轉到登陸頁面
          sessionStorage.setItem('session_key', null)  // 將token清空
          store.dispatch('LogOut').then(() => {
            location.reload() // 刷新頁面
          })
          break
        default:
          Message.error(response.data.data.msg ? response.data.data.msg : '返回狀態非H0000')
      }
      return response.data
    } else {
      Message.error('響應成功，可是響應信息不存在！')
    }
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
      }
    }
    Message.error(ENV === 'development' ? '服務器端產生錯誤！' : '網絡因素，請稍後重試！')
    return Promise.reject(error.response.data)   // 返回接口返回的錯誤信息
  })
複製代碼

做爲一個後臺管理系統，權限控制是永遠都不能逃避的話題，可能簡單的系統，權限控制分管理員、超級管理員，普通用戶等幾個固定權限。可是因爲我司業務繁瑣，有20-30個不一樣崗位的人使用系統，每一個人的權限都會經過後臺配置，好比每一個操做按鈕，有一個編號，用戶登陸後，後臺會返回當前用戶擁有的全部權限的一個編碼數組，從而前端根據數組來進行權限控制。當前簡易模版中，沒有提供相關代碼，因此權限控制您須要結合您公司業務，進行編寫。