這篇文章為大家帶來了關於vue的相關知識，其中主要詳細介紹了vue各種權限控制與管理的實現思路，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。
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 routerv-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各種權限控制與管理的實現思路的詳細內容。更多資訊請關注PHP中文網其他相關文章！
