admin管理员组文章数量:1565292
目录
角色禁用功能(通过自定义指令实现)
需要实现以下功能:两个用户,如果在用户页面中粘贴管理员页面的角色管理会出现404页面,视为不允许进入
首先把角色管理单独拿出来作为动态路由
router 页面
import store from '../store/index' // 引入vuex
const userRoute ={
path: 'role',
name: 'role',
meta:{title:"角色管理"},
component:() => import('../views/Role.vue')
}
定义一个路径用来接收这个动态路由
const userR ={
'/role':userRoute
}
在下方写个函数用来给权限
export function infoUserRoute() {
console.log(router.options.routes);
let routes = router.options.routes
var rightlist = store.state.user.navBar.list
console.log(rightlist);
console.log(routes);
rightlist.forEach(v=>{
if (v.name == '首页') {
v.leftMenus.forEach(item=>{
// console.log(item);
const temp = userR[item.key]; // 角色管理页面单独提取出来
if (temp) {
console.log(temp); //{path: "/role", name: "role", meta: {…}, component: ƒ}
routes[0].children.push(temp)// 九个数组中添加一个角色管理
routes[0].children.forEach(res=>{
router.addRoute('Home',res) //addRoutes可以实现路由添加的功能,事实上就也就实现了用户权限。
console.log(res);
})
}
})
}
})
}
官网解释:
函数签名:
router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
简单来说就是 router.addRoutes('父路由',遍历后的子路由)
在app.vue页面再次调用此函数防止刷新后无法跳转
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import {infoUserRoute} from './router/index';
export default {
name: 'app',
created(){
infoUserRoute()
}
}
</script>
<style>
* {margin:0;padding:0;}
</style>
最后再次写一个404页面用addroute作为动态路由
// 这里再写一个动态404页面
const userRouteTwo = {
path: '*',
name: 'NotFound',
component:() => import('../views/NotFound.vue')
}
export function infoUserRoute() {
let routes = router.options.routes
routes.push(userRouteTwo)
router.addRoute(userRouteTwo)
}
下面是router页面完整代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Welcome from '../views/Welcome.vue'
import User from '../views/User.vue'
import Category from '../views/Category.vue'
import User2 from '../views/User2.vue'
import Products from '../views/Products.vue'
// import Role from '../views/Role.vue'
import Bar from '../views/Bar.vue'
import Line from '../views/Line.vue'
import Pie from '../views/Pie.vue'
import store from '../store/index'
Vue.use(VueRouter)
const userRoute ={
path: 'role',
name: 'role',
meta:{title:"角色管理"},
component:() => import('../views/Role.vue')
}
// 这里再写一个动态404页面
const userRouteTwo = {
path: '*',
name: 'NotFound',
component:() => import('../views/NotFound.vue')
}
const userR ={
'/role':userRoute
}
const routes = [{
path: '/',
name: 'Home',
component: Home,
redirect: '/welcome',
children: [{
path: '/welcome',
name: 'welcome',
component: Welcome
},
{
path: 'user',
name: 'user',
meta:{title:"用户管理"},
component: User,
},
{
path: '/category',
name: 'category',
meta:{title:"品类管理"},
component: Category
},
{
path: '/product',
name: 'product',
meta:{title:"商品生产"},
component: Products
},
/* {
path: '/role',
name: 'role',
meta:{title:"角色管理"},
component: Role
}, */
{
path: '/charts/bar',
name: 'bar',
meta:{title:"柱状图"},
component: Bar
},
{
path: '/charts/line',
name: 'line',
meta:{title:"折线图"},
component: Line
},
{
path: '/charts/pie',
name: 'pie',
meta:{title:"饼图"},
component: Pie
},
{
path: '/user2',
name:'user2',
meta:{title:'用户管理2'},
component: User2
},
]
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
}
]
const router = new VueRouter({
routes,
mode: 'history'
})
export function infoUserRoute() {
console.log(router.options.routes);
let routes = router.options.routes
var rightlist = store.state.user.navBar.list
console.log(rightlist);
console.log(routes);
rightlist.forEach(v=>{
if (v.name == '首页') {
v.leftMenus.forEach(item=>{
// console.log(item);
const temp = userR[item.key]; // 角色管理页面单独提取出来
if (temp) {
console.log(temp); //{path: "/role", name: "role", meta: {…}, component: ƒ}
routes[0].children.push(temp)// 九个数组中添加一个角色管理
routes[0].children.forEach(res=>{
router.addRoute('Home',res)
console.log(res);
})
}
})
}
})
routes.push(userRouteTwo) //分配404页面
router.addRoute(userRouteTwo)
}
// 导航守卫通过login页面判断有无token值,没有不允许放行
router.beforeEach((to,from,next)=>{
if (to.path== '/login') {
next()
}else {
let token = window.sessionStorage.getItem('token')
if (!token) {
next('/login')
}else{
next()
}
}
})
const originalPush = VueRouter.prototype.push
// 重写了原型上的push方法,统一的处理了错误信息
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default router
角色禁用功能(通过自定义指令实现)
router页面中添加一个rights
if (temp) {
temp.meta.rights = item.rights // 添加vuex中的rights数组放到meta.rights中
console.log(temp); //{path: "/role", name: "role", meta: {…}, component: ƒ}
routes[0].children.push(temp)// 九个数组中添加一个角色管理
routes[0].children.forEach(res=>{
router.addRoute('Home',res)
console.log(res);
})
}
把mock数据中的角色管理的添加接口给去掉
{
id: 3,
title: '角色管理',
key: '/role',
name: 'role',
icon: 'el-icon-s-custom',
rights: ['view', 'edit', 'delete']
},
自定义指令
新建一个directive.js页面
import Vue from 'vue'
import router from '@/router/index.js'
Vue.directive('Directive', {
inserted(el, binding) {
console.log(el); // 元素标签
console.log(binding); //value:action: "add" effect: "disbaled"
var action = binding.value.action
console.log(action);
var effect = binding.value.effect
console.log(router.currentRoute.meta); //meta: {title: "用户管理"}
console.log(effect); //
if (router.currentRoute.meta.rights.indexOf(action) === -1) { // 查找到有没有action这个属性
if(effect === "disabled"){
}else {
el.disabled = true;
el.classList.add('is-disabled')
// el.parentNode.removeChild(el)
}
}else{
}
},
});
把自定义指令传给需要禁用的按钮里即可
tabBar.vue
<el-button type="primary" v-Directive="{action:'add',effect:'disbaled'}">添加商品</el-button>
版权声明:本文标题:后台管理系统——角色分配、粘贴地址跳转至404以及角色分配控制按钮权限 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725733278a1039443.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论