Vue项目权限控制

  • 第一步：在权限系统配置权限，并在本系统获取权限列表
  • 第二步，配置路由
  • 第三步，显示有权限的导航



我的项目中主要涉及到的权限控制是：

  • 模块的权限；
  • 操作按钮的权限；

注意：也要控制直接通过url地址进入无权限的页面

第一步：在权限系统配置权限，并在本系统获取权限列表

在权限系统对不同角色进行赋权操作后，其他系统拿到该账户的信息，包括权限信息，然后将权限信息存进vuex。
App.vue

// 获取用户信息
let userInfo = await this.api.CommonApi.getUser()
// 获取权限信息
let userRight = await this.api.CommonApi.getRight(userid:userInfo.userid)
// 初始化权限数组，并且遍历获取权限识别符
let permissions = []
userRight.forEach(item =>{
	permissions.push(item.linkUrl)
})
// 将权限识别符存进vuex
store.commit({
	type:'permissions',
	amount:permissions
})

第二步，配置路由

在路由里加入这个路由的识别信息，如：
router.js

export default new Router({
	routes:[{
		path:'/',
		name:'首页',
		meta:{
			permission:'INDEX'
		},
		component:index
	},
	{
		path:'/model',
		name:'模块一',
		meta:{
			permission:'MODELFirst'
		},
		component:modelFirst
	}]
})

上面的permission就是这个模块的识别信息。

main.js

router.beforeEach((to, from, next) => {
// 如果有目的路由的权限，就可以进入，否则不跳转
  if (store.state.permission.includes(to.meta.permission)) {
    next()
  } else {
    next(false)
  }
})

最后在mian.js中设置路由守卫，防止用户直接通过链接进入自己并没有权限的地址。

第三步，显示有权限的导航

本系统中的导航都是通过权限配置的，只显示该用户有权限的模块，所以导航信息也要动态加载。
首先我在前端已经写好了一个全权限拥有的导航信息，之后只需要遍历出拥有权限的显示就可以了

nav.vue
视图部分（稍微简化了一点）

<template>
	<el-menu>
		<div v-for="(menu, key) in menus" :key="key">
			<el-menu-item :index="menu.index" v-if="menu.children.length === 0">
				<i :class="'icon'+menu.icon"></i>
				<span slot="title" v-text="menu.name"></span>
			</el-menu-item>
			<el-submenu :index="menu.index" v-if="menu.children.length !== 0 && menu.show">
				<template slot="title">
					<i :class="'icon'+menu.icon"></i>
					<span slot="title" v-text="menu.name"></span>
				</template>
				<el-menu-item :index="menu.index+child.index" v-for="(child,key) in menu.children" :key="key">
            		<span slot="title" v-text="child.name" v-if="show(child.permission)"></span>
          		</el-menu-item>
			</el-submenu>
		</div>
	</menu>
</template>

逻辑部分

mounted(){
	this.getMenus()
},
methods:{
	getMenus(){
		this.menus = this.getMenu(this.$enums.MENUS)
	},
	getMenu(){
		let menuTemp = []
		// 遍历整个导航数组
      	menu.forEach(item => {
      	// 如果有子元素的话，那就再循环
	        if (item.children.length > 0) {
	          item.children = this.getMenu(item.children)
	        }
	        // 如果有权限，那就显示
	        if (this.$store.state.permission.includes(item.permission)) {
	          item.show = true
	        } else if (!this.childrenAllFalse(item.children)) {
	        // 如果没权限并且一个子元素都没有的话，也不显示
	          item.show = false
	        }
	        // 然后得到了有权限的导航列表信息
	        menuTemp.push(item)
	      })
	     return menuTemp
	}
	childrenAllFalse (arr) {
      return arr.some(item => {
        return item.show === true
      })
    },
}

这里的逻辑就是渲染有权限的导航。

关于操作的权限控制的话就更简单啦，在公共函数中写：
common.js

function show (str) {
  let vuex = store.state.permissions
  let permissions = str.split('|')
  let visibility = false
  permissions.forEach(item => {
    // let key = $enum.PERMISSION[item]
    if (vuex[item]) {
      visibility = true
    }
  })
  return visibility
}

在要控制的操作按钮那里调用 v-if="show(‘权限识别符’)"就可以了。

可能代码有些错误，有些纯手打的，有些贴的项目代码。大概是这个意思了。