所属分类：web前端开发
本篇文章给大家带来了关于vue的相关知识，其中主要详细介绍了vue各种权限控制与管理的实现思路，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。
微博登录
QQ登录clear()方法清除本地数据,跳转后通过window.location.reload()刷新当前页面,可实现清除vuex数据的操作initDynamicRoutes,分别是登录成功时和页面创建时,否则动态路由为默认值,刷新无法访问import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'
import store from '@/store'
Vue.use(VueRouter)
// 动态路由规则
const tableRule = {
path: '/table',
name: 'table',
component: () => import('@/views/table/index.vue')
}
const imageRule = {
path: '/image',
name: 'image',
component: () => import('@/views/image')
}
const userRule = {
path: '/users',
name: 'users',
component: () => import('@/views/users')
}
// 路由规则和字符串的映射关系
const ruleMapping = {
table: tableRule,
users: userRule,
image: imageRule
}
//静态路由
const routes = [
{
path: '/login',
// name: 'login', // 这里如果有name 控制台会提示
component: () => import('@/views/login')
},
{
path: '/',
component: Layout,
children: [
{
path: '',
// name: 'home',
component: () => import('@/views/home')
},
{
path: '/chart',
component: () => import('@/views/chart')
}
]
}
]
const router = new VueRouter({
routes
})
//路由权限：用户登录后接口返回，存储到本地缓存
const rightList = [
{
id: 1,
authName: "基本页面",
icon: "el-icon-connection",
children: [
{
id: 11,
authName: "表格页面",
icon: "el-icon-s-grid",
path: "table",
rights: ["view", "edit", "add", "delete"]
},
{
id: 12,
authName: "素材页面",
icon: "el-icon-s-marketing",
path: "image",
rights: ["view", "edit", "add", "delete"]
}
]
},
{
id: 2,
authName: "用户权限",
icon: "el-icon-set-up",
children: [
{
id: 21,
authName: "权限页面",
icon: "el-icon-s-custom",
path: "users",
rights: ["view", "edit", "add", "delete"]
}
]
}
];
//在登录(login.vue)、页面刷新（App.vue）的时候，调用initDynamicRoutes
export function initDynamicRoutes () {
// 根据二级权限 对路由规则进行动态的添加
const currentRoutes = router.options.routes
rightList.forEach(item => { // 如果是没有子路由的话 就直接添加进去 如果有子路由的话就进入二级权限遍历
if (item.path) {
const temp = ruleMapping[item.path]
// 路由规则中添加元数据meta
temp.meta = item.rights
currentRoutes[1].children.push(temp)
}
item.children.forEach(item => {
// item 二级权限
const temp = ruleMapping[item.path]
// 路由规则中添加元数据meta，用于按钮权限控制
temp.meta = item.rights
currentRoutes[1].children.push(temp)
})
})
// 添加路由规则
router.addRoutes(currentRoutes)
}
export default router登录后复制v-permissionbinding.value获取到自定义制定属性值的数据vuex|本地缓存中获取到的按钮权限数据是否包含了自定义指令包含的权限el.style.display = “none”,或者使用el.parentNode.removeChild(el)删除当前 按钮元素<el-button v-permission="[$route.path, 'add']">添加</el-button>
directives: {
// 检测全选的指令
permission: {
// 绑定此指令的标签插入到dom节点触发
inserted(el, bind) {
// el:绑定该指令标签
// bind:对象格式 当前绑定指令标签上的数据情况
// 获取按钮上的value值，就是用户当前要使用的权限和请求的路由地址
let value = bind.value//['/user','add']
//模拟后端返回的当前角色对应的权限
let rules = {
'/menu': ['add', 'edit'],
"/user": [ 'edit', 'remove'],
"/goods": ['add']
}
// 根据访问的路由地址获取该模块的操作权限
let allow = rules[value[0]]
// 检测当前操作是否合法
if (!allow.includes(value[1])) {
// 不合法隐藏操作按钮
el.style = "display:none"
}
}
}
}登录后复制数据权限就是不同的角色用户看到的表格数据是不一样的import axios from 'axios'
import router from '@/router'
const request = axios.create()
// 映射
const actionMapping = {
get: 'view',
post: 'add',
put: 'edit',
delete: 'delete'
}
// request.defaults.baseURL = 'http://127.0.0.1:7001' // 注释掉之后调的接口将是Mock数据
// 请求拦截器
request.interceptors.request.use(req => {
// console.log(req.url)
// console.log(req.method)
if (req.url !== '/login' && req.url !== '/roles') {
// 不是登录的请求 也不是获取权限的请求 则在请求头中加入token 不知道如何使用Mock来验证请求头中的token 故此处注释
// req.headers.Authorization = sessionStorage.getItem('token')
const action = actionMapping[req.method]
// 判断非权限范围内的请求
// console.log(router)
const currentRight = router.currentRoute.meta
// console.log(currentRight)
if (currentRight && currentRight.indexOf(action) === -1) {
// 没有权限
alert('没有权限')
return Promise.reject(new Error('没有权限'))
}
}
return req
})
export default request登录后复制推荐学习：《vue视频教程》
以上就是详解vue各种权限控制与管理的实现思路的详细内容，更多请关注zzsucai.com其它相关文章！
