vue根据不同权限显示图片_vue权限控制菜单显示的简单实现

为了对于不同角色显示不同的菜单

思路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)

exportdefault newRouter({

routes: [

{

path:'/login',

name:'login',

component: ()=> import('@//components/login')

},

{

path:'*',

name:'404',

component: ()=> import('@//components/404')

}

]

})

2.登录login

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里的增加路由

}

})

}

},

}

登录时从后台得到菜单数据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)

}

}

}

exportdefault addRoutes

login组件的this.add_Router触发mutations里的ADD_ROUTES,

ADD_ROUTES会做如下:

1. Menufilter(route, addrouter)会处理后台返回的路由数据,因为后台返回的数据中的components对应的是字符串应该把它转化成组件

import {lazy} from './lazyLoading'exportdefault (routers,data) =>{//要重新遍历一下，是因为，通常我们动态路由的时候，

//是获取服务端数据，这个component属性是一个字符串转化成组件

generaMenu(routers,data)

}functiongeneraMenu(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

functionlazy(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= falseVue.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()

}

})newVue({

el:'#app',

store,

router,

components: { App },

template:''})