使用vue-element開發(fā)后臺管理系統(tǒng)，簡單記錄一下，element-admin的文檔寫的已經(jīng)很仔細了，一定要好好閱讀文檔，使用的是admin-template這個基礎(chǔ)模板，已經(jīng)可以滿足開發(fā)需求，主要是權(quán)限控制那部分，也是頁面級權(quán)限控制，前端寫的頁面權(quán)限表，所以就和elementadmin框架思想實現(xiàn)思路一致了。仔細閱讀該框架，代碼真心優(yōu)美流暢，學到很多新姿勢技巧，不愧是vue的top1后臺管理框架，多多向大神學習。

cd 路徑 checkout permission-control分支

整體思路是登錄后token保存到cookie，然后拿token獲取用戶對應(yīng)的權(quán)限維護到vuex里，再動態(tài)篩選用戶可以加載的權(quán)限頁面，addRoutes掛載動態(tài)路由，左側(cè)的siderbar也是根據(jù)vuex內(nèi)容動態(tài)管理的導航欄。在login頁面只做獲取token操作，并沒有順帶再去請求useinfo，相關(guān)操作都是在beforeEach攔截器里進行判斷的(es6 await寫法)
hasPermission這個方法應(yīng)該默認返回false
plop-templates 創(chuàng)建空模板，npm run new
重點學習了directives的用法，vue用來做按鈕級的權(quán)限控制方便，強大

vue.config.js

這里主要修改proxy的配置項，來進行代理

  devServer: {
    port: port,
    open: true,
    proxy:{
      [process.env.VUE_APP_BASE_API]:{
        target: 'http://域名/', // 后臺接口域名
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js')
  },
.env.production

# just a flag
ENV = 'production'

# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = ''

這里要注意，修改完之后，最好，重新啟動一次項目

正常啟動之后，因為關(guān)閉了mock，是無法直接登錄，進去的，所以我們先掉登錄的接口
找到src/api/user.js改成自己的接口地址

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

接著找到utils/request.js

這里判斷了，token存在的話，將其直接添加到請求頭中，當然這里如果在做加密更好

if (store.getters.token) {
    // let each request carry token
    // ['X-Token'] is a custom headers key
    // please modify it according to the actual situation
    config.headers['X-Token'] = getToken()
}
request.js中還要將判斷的狀態(tài)碼改成真實后端返回的成功狀態(tài)碼，一般都是200
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

最后找到store/modules/user.js

這里是登錄的actions，可以看到登錄請求回來的是token，然后講token提交到了SET_TOKEN，后端返回的token如果在data下，則不需要修改，要是數(shù)據(jù)結(jié)構(gòu)有變化，再進行相應(yīng)的修改

  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
以上配置都沒有問題，那么登錄接口就基本沒問題了，不過此時還進不去主頁。

這里請求完登錄之后，再跳轉(zhuǎn)首頁的時候，請求了info接口，因此，還需要一個用戶信息的接口，這里只需要講api/user.js中的user/info接口改成自己的便可，注意前后端字段要對上，如此，便能進入首頁。
3.修改頁面設(shè)置項
找到src/views/settings.js

module.exports = {
  title: 'Vue Element Admin', //網(wǎng)站標題
  showSettings: true,//是否展示頁面設(shè)置
  tagsView: true,//是否展示標簽頁
  fixedHeader: false,//是否固定頭部
  sidebarLogo: false,//是否在左側(cè)導航展示logo
  supportPinyinSearch: true,
  errorLog: 'production'
}