Vue2.0 + ElementUI 手寫權限管理系統后台模板（一）——簡述

擠一下: 一開始以為沒有多少人用就沒建群,但是加我的人太多了，好多問題都是重復的，所以建個群大家互相溝通交流方便點，但是建的有點晚，錯過了好多人所以群里人有點少,QQ群: 157216616

小提示

這個框架權限是由前端控制的,如果不需要這個模式,可以看我另外一個全棧CMS項目,后台使用的是node框架egg.js+mysql,那個的權限是由后台返回有權限的路由,前端拿到路由后和前端路由表做篩選,得出最終的路由表生成菜單,好處是角色和角色所擁有的權限路由是動態的后台可隨時編輯配置的,兩種模式按需使用

源碼地址：

• github：https://github.com/Nirongxu/nodePlatform-eggjs
• 碼雲：https://gitee.com/nirongxu/nodePlatform-eggjs

簡介

這個權限管理就是為了方便,跟系統安全真的不沾邊，只是根據后台返回的角色信息來生成他可以看見的菜單和按鈕，顯示菜單的方法是根據權限刪除掉路由表里沒有權限的路由，然后再動態添加，原本包含沒有訪問權限的原路由表只要打開頁面運行代碼就已經不存在了，並且404頁面除了過濾掉項目沒有的路由外，同時每次的路由跳轉都會鑒權。如果你知道了沒有權限的路由試着強行跳轉會因為沒有權限直接會跳轉404。
就算通過查看代碼或者其他方法獲取全部路由，並且繞過404，花了這么大精力，，那你也看不到新世界的大門，因為所有數據都是通過后台請求返回來的，你沒權限后台不會給你數據的，也不會讓你去操作，，除非后台不驗證權限，只要有人請求我就給你所有數據，，，，

最近寫了一個基於vue2.0+element-ui權限管理系統的后台模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注於項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。

源碼地址：

• github：https://github.com/Nirongxu/vue-xuAdmin
• 碼雲：https://gitee.com/nirongxu/vue-xuAdmin

預覽地址：

• github: https://nirongxu.github.io/vue-xuAdmin/dist/
• 國內gitee: http://nirongxu.gitee.io/vue-xuadmin/#/login

vue-xuAdmin是基於vue2.0全家桶 + element-ui 開發的一個后台模板，實現了無限級菜單，頁面、按鈕級別的權限管理，為了減少前后端的溝通成本，頁面、按鈕級別的權限驗證和動態路由表的存儲校驗，也都由前端完成，這樣前端新建頁面或者刪除頁面都不需要告訴后台去增加刪除路由表

部分截圖

更新日志

v1.2.5

1. 增加DllPlugin優化構建速度,編譯速度更快 yarn startdll
2. 增加build版本控制
3. 增加 刷新瀏覽器會保持繼續顯示當前組件,不會使系統跳轉到首頁

v1.2.1

1. 升級webpack 4.0, 做了一些性能優化,編譯時間從13秒優化到2-3秒,速度最高提升90%(第一次啟動時間是正常時間,啟動后Ctrl+c 關閉項目重新啟動速度會變快)
2. 封裝了axios 請求
3. 增加了一些全局公共方法/utils/global,和一些工具函數/utils/index,封裝了表單驗證/utils/rules
4. 項目結構做了一些調整
5. 重做了404頁面
6. 修復了幾個小bug
7. 增加build打包結果分析 yarn analyz

2. 准備工作

-開發環境

• node.js v8.0+
• webpack v4
• git

-技術棧

• ES6+
• vue2.0+
• vue-router
• vuex
• axios
• scss
• element-ui v2.4+

3. 基礎框架功能

- 登錄、退出
+ 基於token
    - 狀態攔截、404頁面
    - 動態加載路由
    - 頁面、按鈕指令權限管理
    - 無限級菜單
- 封裝vue-i18n@8.x國際化組件
- 系統全屏化
- 菜單收縮
- icon 圖標
+ tab標簽導航
	- 右擊快捷功能
- 表格拖拽排序
- 封裝了 axios
- 封裝了全局方法,和一些工具函數
- 編輯器
	- markdown（編輯器目前只封裝了這一個組件，重寫了markdown編輯和預覽的皮膚，實時獲取：markdown，html，json 三種格式文本）
- Echarts 組件封裝

封裝了一些element-ui沒有但是常用的組件，正常需要的功能element-ui里面都有，可以直接復制，如果element-ui不能滿足你的需求只有自己寫了

4. 開發

登錄

登錄頁面只有輸入賬號密碼，需要驗證碼的可以自行去搜第三方驗證插件，有收費有免費。這里僅為了測試，就把輸入的賬號當做 token 來存儲，完成整個系統的會話，實際開發以登錄成功后后台返回的 token 為准

// 登錄頁面
submitForm () {
      let that = this
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$message({
          showClose: true,
          message: "賬號或密碼不能為空",
          type: "error"
        })
        return false
      } else {
        // 真實請求參考
        // fetchLogin 是封裝的登錄接口,所有請求都被封裝在 src/api/ 文件夾下
        this.$request.fetchLogin({
          username: that.loginForm.username,
          password: that.loginForm.password
        }).then(res => {
        // $restBack 是封裝的全局返回方法,全局方法和工具函數在 src/utils 文件夾下
          that.$restBack(res.data, () => {
            that.$store.dispatch("setToken", res.data.data.access_token).then(res => {
              that.$router.push({path: "/"})
            })
          }, "登錄成功")
        }).catch((err) => {
          console.log(err)
        })
      }
    },

// vuex 
  state: {
    token: Cookies.get('token') // 刷新頁面或者在新標簽頁打開，從cookie獲取初始token
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      Cookies.set('token', token ,{ expires: 1/24 }) // 引用‘js-cookie’模塊，存儲 token 到cookie
    }
  },
  actions: {
    setToken ({commit}, token) {
      return new Promise((resolve, reject) => {
        commit('setToken', token)
        resolve()
      })
    }
  },

系列文章

Vue2.0 + ElementUI 手寫權限管理系統后台模板（一）——簡述

Vue2.0 + ElementUI 手寫權限管理系統后台模板（二）——權限管理

Vue2.0 + ElementUI 手寫權限管理系統后台模板（三）——頁面搭建

Vue2.0 + ElementUI 手寫權限管理系統后台模板（四）——組件結尾