vue許可權控制選單顯示的簡單實現
阿新 • • 發佈:2018-12-02
為了對於不同角色顯示不同的選單
思路1:
本地放一份完整的選單資料,通過後臺返回角色的選單列表.兩者對比,篩選需要顯示的選單資料繫結,
這裡有個問題就是路由vue例項初始化就生成了,載入的全部,人為輸入地址是可以訪問到角色許可權以外的資料,
所以還要加路由構子router.beforeEach()去做判斷哪些是角色許可權以內的路由.
這種思路的比較複雜,邏輯比較多
思路2:
Vue Router官方API:
利用router.addRouter()就可以動態新增路由實現
下面詳細講一講vue.addRouter()實現步驟
1.初始化路由只有404.和login元件
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/login', name: 'login', component: () => import('@//components/login') }, { path: '*', name: '404', component: () => import('@//components/404') } ] })
2.登入login
<script> import {mapActions} from 'vuex' export default { name: 'login', data() { return { user: { username: '', password: '' }, loading: false, } }, methods: { ...mapActions({add_Routes: 'add_Routes'}), handleLogin() { // 這裡為了方便就設定兩個使用者,其它不允許 if (this.user.username !== 'common' && this.user.username !== 'admin') { return } this.loading = true this.$api.login(this.user.username, this.user.password).then((res) => { if (res.status === 200) { // 將路由資訊,選單資訊,使用者資訊存到sessionStorage裡 sessionStorage.setItem('menuData', JSON.stringify(res.data.navData)) sessionStorage.setItem('user', this.user.username) sessionStorage.setItem('routes', JSON.stringify(res.data.routerData)) this.add_Routes(res.data.routerData) //觸發vuex裡的增加路由 } }) } }, } </script>
登入時從後臺得到選單資料navData和路由資料routerData把它存進sessionStorage防止重新整理頁面時丟失,
引入vuex的this.add_Router()觸發
vuex:
import {ADD_ROUTES} from './mutations_type' import Menufilter from './menufilter' import router from '../router' const addRoutes = { state: { routeData: [] }, mutations: { [ADD_ROUTES](state, addrouter) { let routes = [] Menufilter(routes, addrouter) // 將後臺的路由資料components轉化成元件 router.addRoutes(routes) // 新增路由 router.push('/') } }, actions: { add_Routes({commit}, addrouter) { commit(ADD_ROUTES, addrouter) } } } export default addRoutes
login元件的this.add_Router觸發mutations裡的ADD_ROUTES,
ADD_ROUTES會做如下:
1. Menufilter(route, addrouter)會處理後臺返回的路由資料,因為後臺返回的資料中的components對應的是字串應該把它轉化成元件
import {lazy} from './lazyLoading' export default (routers,data) => { //要重新遍歷一下,是因為,通常我們動態路由的時候, //是獲取服務端資料,這個component屬性是一個字串轉化成元件 generaMenu(routers,data) } function generaMenu(routers,data){ data.forEach((item)=>{ let menu = Object.assign({},item) menu.component = lazy(menu.component) if(item.children){ menu.children = [] generaMenu(menu.children,item.children) } routers.push(menu) }) }
// 懶載入元件lazy function lazy(name) { let file = name.split('_')[0] if (name !== 'dashboard') { return () => import(`@/page/${file}/${name}.vue`) } else { return () => import(`@/components/${name}.vue`) } } export {lazy}
2. 呼叫router.addRouter(routes)動態新增路由
為了防止使用者手動重新整理頁面還要在main.js重新觸發vuex裡的add_Routes方法新增路由
import Vue from 'vue' import App from './App' import router from './router' import Element from 'element-ui' import store from './store/store' import 'element-ui/lib/theme-chalk/index.css' import api from './api/api' Vue.config.productionTip = false Vue.prototype.$api = api Vue.use(Element) // 使用者手動重新整理頁面,這是路由會被重設,要重新新增 if (sessionStorage.getItem('user')) { let routes = JSON.parse(sessionStorage.getItem('routes')) store.dispatch("add_Routes", routes) } // 登入狀態判斷 router.beforeEach((to, from , next) => { if (!sessionStorage.getItem('user') && to.path !== '/login') { next({ path: '/login', query: {redirect: to.fullPath} }) } else { next() } }) new Vue({ el: '#app', store, router, components: { App }, template: '<App/>' })
具體原始碼請訪問https://github.com/liuyangjike/dynamic-router 一個實現的demo,如果覺得有幫助,請star一下