vue权限管理实现思路

前端权限管理的意义：

1、降低非法操作的可能性

2、尽可能排除不必要的请求，减轻服务器的压力

3、提高用户体验

前端权限控制的思路：

1、菜单控制：在登录请求当中，会得到权限数据，权限需要在多个组件之间共享，所以可以通过vuex保存数据并且展示相应的菜单，页面刷新的情况下会丢失数据，所以把权限数据存入sessionStorage中。

2、界面控制：如果用户没有登录，手动输入url地址，应该阻止并跳转到登录页面，通过路由导航守卫来实现。动态路由可以让不具备权限的界面在路由规则中不存在

3、按钮控制：路由规则中可以添加元数据meta，通过路由对象可以得到当前的路由规则以及存储在路由规则中的元数据，自定义指令可以实现对按钮的控制

4、请求和响应控制：请求拦截和相应拦截的使用，请求方式约定restful

实现代码：

登录login相关代码：

login(){...const user = res.data  //登录成功后，获取用户信息，包括token,用户名，权限rights等this.$store.commit('setUser', user) // 将用户信息存储到vuex当中sessionStorage.setItem('token', res.data.token) //将token信息存储到sessionStorage中initDynamicRoutes()  // 动态添加路由this.$router.push('/') // 登录成功后跳转
}

store相关代码：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {user: JSON.parse(sessionStorage.getItem('user') || '[]')  // 刷新页面的时候从sessionStorage中读取数据},mutations: {setUser (state, user) {state.user = user  // 首次登录将用户信息赋值给user ,并且存入sessionStoragesessionStorage.setItem('user', JSON.stringify(user))}},actions: {},modules: {}
})

router相关代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import NotFound from '../views/NotFound.vue'Vue.use(VueRouter)// 权限路由路径映射
const mappingPath = {'/menu/one': { path: '/menu/one', component: () => import('@/views/Page1.vue') },'/menu/two': { path: '/menu/two', component: () => import('@/views/Page1.vue') },'/menu/three': { path: '/menu/three', component: () => import('@/views/Page1.vue') },'/menu/four': { path: '/menu/four', component: () => import('@/views/Page1.vue') },'/menu/five': { path: '/menu/five', component: () => import('@/views/Page1.vue') }
}const routes = [{path: '/',name: 'Home',component: Home,redirect: '/menu/one',children: []},{path: '/login',name: 'Login',component: Login},{path: '*',name: 'NotFound',component: NotFound}
]const router = new VueRouter({routes
})// 动态路由添加方法
export function initDynamicRoutes () {const currentRoutes = router.options.routesconst rights = store.state.user.rights || []rights.forEach(item => {item.children.forEach(item => {const temp = mappingPath[item.path]temp.meta = item.rightscurrentRoutes[0].children.push(temp)})})router.addRoutes(currentRoutes)
}// 路由导航守卫判断
router.beforeEach((to, from, next) => {if (to.path === '/login') {next()} else {const token = sessionStorage.getItem('token')if (!token) {next({ path: '/login' })} else {next()}}
})export default router

动态路由添加，刷新页面的时候不会重新走login方法，因此在App.vue的生命周期函数中需要再执行一次 initDynamicRoutes()

import { initDynamicRoutes } from './router'
export default {name: 'app',components: {},created () {initDynamicRoutes()}
}

按钮控制是通过指令来实现的：在对应的按钮上加上指令：v-permission='{action:"add",effect:"disabled"}'

import vue from 'vue'
import router from '../router'vue.directive('permission', {inserted: function (el, bind) {const action = bind.value.actionconst currentRights = router.currentRoute.metaif (currentRights) {if (currentRights.indexOf(action) === -1) {if (bind.value.effect === 'disabled') {el.disabled = trueel.classList.add('is-disabled')} else {el.parentNode.removeChild(el)}}}}
})

请求和响应控制是通过添加拦截器来实现的：

import Axios from 'axios'
import router from '../router'const axios = Axios.create({// baseURL: process.env.NODE_ENV === 'development' ? '' : '',
})const map = {get: 'view',put: 'edit',post: 'add',delete: 'delete'
}axios.interceptors.request.use(function(req){const currentUrl = req.urlconst rights = router.currentRoute.meta.rights || []if (currentUrl !== '/login' && !rights.includes(map[req.method])) {return Promise.reject(new Error('没有权限操作！'))}
})axios.interceptors.response.use(function(res){if(res.data.meta.status === 401){router.push('/login')sessionStorage.clear()window.location.reload()}
})export default (url, method = 'get', data = {}) => {return axios({url,method,data})
}

权限的mock数据：

const users = [{id: 1,username: '普通用户',password: 'normal',token: 'abcdefghijklmnopqrstuvwxyz',rights: [{id: 1,authName: '一级菜单',icon: 'icon-menu',children: [{id: 11,authName: '一级项目1',path: '/menu/one',rights: ['view']}, {id: 11,authName: '一级项目2',path: '/menu/two',rights: ['view']}]}]},{id: 2,username: '管理员',password: 'admin',token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),rights: [{id: 1,authName: '一级菜单',icon: 'icon-menu',children: [{id: 11,authName: '一级项目1',path: '/menu/one',rights: ['view', 'edit', 'add', 'delete']}, {id: 11,authName: '一级项目2',path: '/menu/two',rights: ['view', 'edit', 'add', 'delete']}]}, {id: 2,authName: '二级菜单',icon: 'icon-menu',children: [{id: 22,authName: '二级项目1',path: '/menu/three',rights: ['view', 'edit', 'add', 'delete']}, {id: 22,authName: '二级项目1',path: '/menu/four',rights: ['view', 'edit', 'add', 'delete']}, {id: 22,authName: '二级项目1',path: '/menu/five',rights: ['view', 'edit', 'add', 'delete']}]}]}
]

vue权限管理实现思路相关推荐

vue权限管理的设计与实现
一.什么是权限管理在web应用中权限管理,一般指根据系统设置和分配给某个角色的应用权限,用户可以访问而且只能访问自己被分配的资源.权限管理几乎出现在任何系统里面,在web后台管理系统里面尤为常见. ...
Vue权限管理解决方案
中文 | English vue-access-control :gem: Vue权限管理解决方案介绍 Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的 ...
数据权限设计思路_后台权限管理设计思路：三种模型分析
编辑导语:任何系统/产品搭建时,最先考虑的都应该是权限管理模块,而且权限管理模块的清晰.稳定是平台产品健康发展的基石,权限管理核心考虑的问题是用户与权限的关系.本文作者对三种不同权限管理的版本展开了梳 ...
企业项目权限管理设计思路详解
任何系统都离不开权限的管理,有一个好的权限管理模块,不仅使我们的系统操作自如,管理方便,也为系统添加亮点. l 不同职责的人员,对于系统操作的权限应该是不同的.优秀的业务系统,这是最基本 ...
后台的权限管理设计思路
[sql] view plaincopy <span style="font-family:Arial, Helvetica, sans-serif;background-color: ...
vue 权限管理动态路由（6）
1.动态生成路由 import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' // ...
Javaweb权限管理设计思路
权限管理业务界面如下: 数据库方面需要建立六张表: 用户表:user(用于存放用户的相关属性) id,登录名,用户姓名... 角色表:role(用于存放角色):roleId,roleName 用户-角 ...
java web权限_Javaweb权限管理设计思路
权限管理业务界面如下: 数据库方面需要建立六张表: 用户表:user(用于存放用户的相关属性) id,登录名,用户姓名... 角色表:role(用于存放角色):roleId,roleName 用户-角 ...
云尚办公OA系统学习笔记（5.权限管理）
目录一.权限管理 1.权限管理介绍 1.1 菜单权限 1.2 按钮权限 1.3 权限管理设计思路 2.JWT 2.1 JWT介绍 2.2 JWT令牌的组成 2.3 项目集成JWT 2.3.1 引入依 ...
Qt编写物联网管理平台31-用户权限管理
一.前言随着需求的不断变化,功能的增多,在用户信息这块,除了需要用户登录退出验证以外,还需要有个简单的用户权限逻辑处理,比如限定某些用户只有查看权限,没有删除记录.清空记录.系统设置的权限,与之相对 ...

vue权限管理实现思路

vue权限管理实现思路相关推荐

最新文章

热门文章