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

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

簡介

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

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

原始碼地址：

預覽地址：nirongxu.github.io/vue-xuAdmin…

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

部分截圖

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

2. 準備工作

-開發環境

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

-技術棧

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

3. 基礎框架功能

- 登入、退出
+ 基於token
    - 狀態攔截、404頁面
    - 動態載入路由
    - 頁面、按鈕指令許可權管理
    - 無限級選單
- 封裝vue-i18n@8.x國際化元件
- 系統全屏化
- 選單收縮
- icon 圖示
+ tab標籤導航
	- 右擊快捷功能
- 表格拖拽排序
- 編輯器
	- 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 {
        // 將 username 設定為 token 儲存在 store，僅為測試效果，實際儲存 token 以後臺返回為準
        that.$store.dispatch('setToken', that.loginForm.username).then(() => {
          that.$router.push({path: '/'})
        }).catch(res => {
          that.$message({
            showClose: true,
            message: res,
            type: 'error'
          })
        })
      }
    },
複製程式碼
// 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 手寫許可權管理系統後臺模板（四）——元件結尾

相關文章