Vue2.0 + ElementUI 手寫許可權管理系統後臺模板（一）——簡述

鄰家蜘蛛俠發表於2020-05-15
VueUI

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

小提示

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

原始碼地址：

簡介

這個許可權管理就是為了方便,跟系統安全真的不沾邊，只是根據後臺返回的角色資訊來生成他可以看見的選單和按鈕，顯示選單的方法是根據許可權刪除掉路由表裡沒有許可權的路由，然後再動態新增，原本包含沒有訪問許可權的原路由表只要開啟頁面執行程式碼就已經不存在了，並且404頁面除了過濾掉專案沒有的路由外，同時每次的路由跳轉都會鑑權。如果你知道了沒有許可權的路由試著強行跳轉會因為沒有許可權直接會跳轉404。
就算通過檢視程式碼或者其他方法獲取全部路由，並且繞過404，花了這麼大精力，，那你也看不到新世界的大門，因為所有資料都是通過後臺請求返回來的，你沒許可權後臺不會給你資料的，也不會讓你去操作，，除非後臺不驗證許可權，只要有人請求我就給你所有資料，，，，

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

原始碼地址：

預覽地址：https://nirongxu.github.io/vue-xuAdmin/dist/

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

部分截圖

enter description here
enter description here
enter description here
enter description here
enter description here
enter description here

更新日誌

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()
      })
    }
  },

相關文章