// directives.js
import store from '@/store'
export default {
'hasRole': {
inserted: function (el, binding, vnode) {
let roles = store.state.userInfo.roles || ['user']
if(!roles.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
}
}
// xxx.vue
<div v-hasRole="'admin'">
...
</div>
// vuex
import vuex from './vuex';
let dynamicRouter = [{
path: '',
name: '',
component: xxx,
meta: {
// 通过后台动态添加到路由 addRoutes
types: ['get', 'add', 'edit']
}
}]
state: {
isAddRoutes: false,
// 后端返回的原始数据默认存到 localStorage,每次初始化取出来
roleRouterRules: JSON.parse(localStorage.getItem('roleRouterRules')),
},
// 公共变量 => 派生私有变量
getters: {
isAddRoutes: state => state.isAddRoutes,
// 根据 roleRouterRules 生成当前角色的动态路由配置数据(addRoutes方法可以直接使用的路由数组)
roleRouter: state => {
if (state.roleRouterRules) {
return dynamicRouter.filter(
router => state.roleRouterRules.indexOf(router.name) >= 0,
);
} else return null;
},
},
// 私有方法(同步) => 改变静态变量
mutations: {
set_isAddRoutes: (state, data) => (state.isAddRoutes = data), // payload: true/false
set_roleRouterRules: (state, data) => (state.roleRouterRules = data), // payload: true/false
},
// 公共方法(可异步)=> 调用私有方法
actions: {
set_isAddRoutes({ commit }, data) {
commit('set_isAddRoutes', data);
},
set_roleRouterRules({ commit }, data) {
// 保存到vuex
commit('set_roleRouterRules', data);
// 保存到 localStorage,当用户强制刷新浏览器时我们要使用这一份数据初始化 state.roleRouterRules
localStorage.setItem('roleRouterRules', JSON.stringify(data));
},
}
// routes.js
import vuex from './vuex'
router.beforeEach((to, from, next) => {
let path = to.redirectedFrom || to.path
// 白名单 放行
if (whiteList.indexOf(path) >= 0) return next()
// 黑名单
if (!vuex.getters.roleRouter) return next({ path: '/login' })
if (!vuex.getters.isAddRoutes) {
router.addRoutes(vuex.getters.roleRouter)
vuex.dispatch('set_isAddRoutes', true)
next(path);
} else {
next();
}
});
// xxx.vue
import { mapActions } from "vuex";
export default {
methods: {
...mapActions([
"set_roleRouterRules"
]),
login(roleRouterRules) {
// 登录成功,vuex 存储角色路由
this.set_roleRouterRules(roleRouterRules);
// 跳转到动态注册B
this.$router.replace({ path: "/b" });
}
}
};
// directives.js
export default {
'hasPermission': {
inserted: function (el, binding, vnode) {
let types = vnode.context.$route.meta.types
let values = binding.value
let flag = true
for(let v of values) {
if(!types.inclues(v)) {
flag = false
}
}
if(!flag) {
el.parentNode.removeChild(el)
}
}
}
}
// vuex
import vuex from './vuex';
let routes = [{
path: '',
name: '',
component: xxx,
meta: {
// 通过后台动态添加到路由 addRoutes
types: ['get', 'add', 'edit']
}
}]
// xxx.vue
<span v-hasPermission="['get', 'delete']">
...
</span>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。