后台管理系统——角色分配、粘贴地址跳转至404以及角色分配控制按钮权限

目录

角色禁用功能（通过自定义指令实现）

---

需要实现以下功能：两个用户，如果在用户页面中粘贴管理员页面的角色管理会出现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>