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

小提示

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

項目地址: github.com/Nirongxu/no…

簡介

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

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

源碼地址：

• github：github.com/Nirongxu/vu…
• 碼雲：gitee.com/nirongxu/xu…

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

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

部分截圖

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 手寫權限管理系統後臺模板（四）——組件結尾