簡介

這個權限管理就是為了方便,跟系統安全真的不沾邊，只是根據后臺返回的角色信息來生成他可以看見的菜單和按鈕，顯示菜單的方法是根據權限刪除掉路由表里沒有權限的路由，然后再動態添加，原本包含沒有訪問權限的原路由表只要打開頁面運行代碼就已經不存在了，并且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 = thisif (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 = tokenCookies.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 手寫權限管理系統后臺模板（四）——組件結尾

轉載于:https://juejin.im/post/5c15332be51d4513ea6ed291

總結

以上是生活随笔為你收集整理的Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。