脚本宝典收集整理的这篇文章主要介绍了vue.js除了动态路由,前端权限还可以这么玩,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
关于动态路由的相关处理,请参考本人的另一篇文章vue.js前后端分离后台,该如何根据用户权限处理前端显示和后台接口访问,本文作为上一篇的续作
有时候仅处理菜单,是不够的,很多情况下,有读的权限,但无写的权限的时候,就需要更灵活的控制。也就是这篇文章的由来。
大概有两种方式可以使用:
关于指令的使用,网上的文章比较多了,主要是操作DOM,把没有权限的元素从已渲染的画面里面删除。这里只是简单的出个示范,具体可以参考自己的授权系统开发:
import Vue from 'vue'
// import Store from '../store/'
const directives = {
role: {
// 指令的定义 (TBD:有没有before'inserted'这样的钩子函数用?)
inserted: (el, binding, vnode) => {
// 权限
if (binding.value && [处理权限的判定]) {
el.parentElement.removeChild(el)
}
}
}
}
Object.keys(directives).forEach(key => {
Vue.directive(key, directives[key])
})
<el-button type="success" icon="el-icon-document" size="small" v-role="xxx-upload"
@click="$router.push({name: 'music-album-multi-upload'})">上传
</el-button>
不确定对于vue组件,有没有全局的生命周期钩子,如果有的话,处理起来就更方便了。
下面就以普通的组件形式来说明下处理过程:
写一个全局的组件,注册为v-sec
,其中参数code为访问当前画面segment的授权码。
<template>
<div>
<slot v-if="permitted"></slot>
</div>
</template>
<script>
import vuet from '@/vuet/'
export default {
name: "sec",
props: {
code: {
type: String,
required: true,
default: 'text'
},
},
data() {
return {
permitted: false
}
},
beforeCreate() {
let userSelf = vuet.getModule('user-self')
if (userSelf /* && userSelf.secCodes && userSelf.secCodes.contains(this.code) */) {
this.$nextTick(function () {
this.permitted = true
})
}
}
}
</script>
然后在画面上使用
<v-sec code="xxx-add">
<el-button type="success" icon="el-icon-document" size="small"
@click="$router.push('/sys/module/add')">添加
</el-button>
</v-sec>
与指令的那种方式在使用方面差不多,如果组件的这种方式能避免内嵌的组件被渲染,那效果会比指令的那种好一些。
接下来,在项目只可能就两种方式分别做实验。
一般通过导航+动态路由能控制住的,像画面和菜单。
然后配合路由的全局函数router.beforeEach
基本上比较好实现。
为了配合动态路由,需要指定以下几个字段
基本上标记个名字,与画面关联起来以便于管理就可以了。
然后配置后台管理系统,可以通过先通过后台录入画面及画面片段,然后用程序生成对应的vue文件及部分代码。这样子开发效率是不是高一些?
授权时,把画面和画面片段与角色关联即可,然后用户在登录后获取到角色,再从内存/DB/缓存中把角色对应的画面和菜单等权限查出,合并到一起返回给vue。vue拿到数据后,缓存到localstorage以避免画面的刷新(f5/浏览器刷新)后出现404的问题,这一点在上一篇里面已经说明过了。
以上是脚本宝典为你收集整理的vue.js除了动态路由,前端权限还可以这么玩全部内容,希望文章能够帮你解决vue.js除了动态路由,前端权限还可以这么玩所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。