菜单控制
登录成功保存一下信息(根据返回的权限信息渲染侧边栏)
this.$store.commit('setRightList', res.rights)//侧边栏权限信息 this.$store.commit('setUsername', res.data.username)//用户信息 sessionStorage.setItem('token', res.data.token)//token
界面控制
是否登录
router.beforeEach((to, from, next) => { if (to.path === '/login') { next() } else { const token = sessionStorage.getItem('token') if (!token) { next('/login') } else { next() } } })
是否权限路由(动态路由)
import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login.vue' import Home from '@/components/Home.vue' import Welcome from '@/components/Welcome.vue' import Users from '@/components/user/Users.vue' import Roles from '@/components/role/Roles.vue' import GoodsCate from '@/components/goods/GoodsCate.vue' import GoodsList from '@/components/goods/GoodsList.vue' import test from '@/components/test/Test.vue' import NotFound from '@/components/NotFound.vue' import store from '@/store' Vue.use(Router) const userRule = { path: '/users', component: Users } const roleRule = { path: '/roles', component: Roles } const goodsRule = { path: '/goods', component: GoodsList } const categoryRule = { path: '/categories', component: GoodsCate } const ruleMapping = { 'users': userRule, 'roles': roleRule, 'goods': goodsRule, 'categories': categoryRule } const initRoutes = [ { path: '/', redirect: '/home' }, { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', children: [ { path: '/welcome', component: Welcome }, // { path: '/users', component: Users }, // { path: '/roles', component: Roles }, // { path: '/goods', component: GoodsList }, // { path: '/categories', component: GoodsCate } ] }, { path: '*', component: NotFound } ] const router = new Router({ routes: initRoutes }) router.beforeEach((to, from, next) => { if (to.path === '/login') { next() } else { const token = sessionStorage.getItem('token') if (!token) { next('/login') } else { next() } } }) /* const userRule = { path: '/users', component: Users } const roleRule = { path: '/roles', component: Roles } const goodsRule = { path: '/goods', component: GoodsList } const categoryRule = { path: '/categories', component: GoodsCate } const ruleMapping = { 'users': userRule, 'roles': roleRule, 'goods': goodsRule, 'categories': categoryRule } */ export function initDynamicRoutes() { // router.options.routes 初始化路由(默认) let currentRoutes = router.options.routes console.log(currentRoutes); // store.state.rightList 后端返回的 权限信息 const rightList = store.state.rightList // let arr = [] rightList.forEach(item => { item.children.forEach(item => { // ruleMapping 事先定义的动态路由 const itemRule = ruleMapping[item.path] // item.rights 后端标识的用户权限 itemRule.meta = item.rights//存储按钮权限信息挂载到路由的meta // currentRoutes[2].children 都添加到 home的子路由中 currentRoutes[2].children.push(itemRule)//复合的全部push到路有列表的对应位置 // arr.push(itemRule) // console.log(currentRoutes); }) }) // console.log(arr); // currentRoutes[2].children.push(...arr) // router.addRoutes(currentRoutes) router.addRoutes([...currentRoutes, { path: '/test', component: test },])//替换路由规则 console.log(router.options.routes); /* { "id": 125, "authName": "用户管理", "icon": "icon-user", "children": [ { "id": 110, "authName": "用户列表", "path": "users", "rights": [ "view", "edit", "add", "delete" ] } ] }, */ } // 退出清理动态路由 export function resetRouter() { const newrouter = new Router({ routes: initRoutes }) router.matcher = newrouter.matcher } export default router
登录逻辑中调用 和app的create中调用 initDynamicRoutes() // 动态添加
退出逻辑
logout() { console.log(1111); resetRouter()// 重置路由 console.log(2222); sessionStorage.clear() window.location.reload()// 刷新页面 console.log('this.$router.resetRoutes()'); this.$router.push('/login')// 跳转到登录页 },
按钮控制
根据路由上的meta信息 在对应的按钮上如下
v-permission="{action:'edit', effect:'disabled'}"
import Vue from 'vue' import router from '@/router.js' // 自定义指令 Vue.directive('permission', { inserted: function (el, binding) { console.log(el, binding); // 当前使用的元素绑定的 绑定的数据 // v-permission="{action:'edit', effect:'disabled'}" // ['view', 'edit', 'add', 'delete']meta信息 const action = binding.value.action const currentRight = router.currentRoute.meta //获取当前路由的meta信息 console.log(currentRight); if (currentRight) { console.log(123); if (currentRight.indexOf(action) == -1) {//不具备该权限的逻辑 const type = binding.value.effect if (type === 'disabled') {//禁用操作 el.disabled = true//element-ui禁用样式 el.classList.add('is-disabled')//element-ui禁用样式 } else { el.parentNode.removeChild(el)// 不具备权限隐藏按钮 } } } } })
请求响应控制
请求响应拦截器
import axios from 'axios' import Vue from 'vue' import router from '../router' // 配置请求的跟路径, 目前用mock模拟数据, 所以暂时把这一项注释起来 // axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' const actionMapping = { get: 'view', post: 'add', put: 'edit',import axios from 'axios' import Vue from 'vue' import router from '../router' // 配置请求的跟路径, 目前用mock模拟数据, 所以暂时把这一项注释起来 // axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' const actionMapping = { get: 'view', post: 'add', put: 'edit', delete: 'delete' } // 请求拦截器 axios.interceptors.request.use(function(req){ const currentUrl = req.url console.log(req); // 不是登录的请求 if (currentUrl !== 'login') { // 添加请求头 req.headers.Authorization = sessionStorage.getItem('token') // 当前模块中具备的权限 // 查看用户 get请求 // 增加用户 post请求 // 修改用户 put请求 // 删除用户 delete请求 const method = req.method // 根据请求, 得到是哪种操作 const action = actionMapping[method] // 判断action是否存在当前路由的权限中 const rights = router.currentRoute.meta // 当前路由的原信息 if(rights && rights.indexOf(action) == -1) { // 没有权限 alert('没有权限') return Promise.reject(new Error('没有权限')) } } return req }) axios.interceptors.response.use(function(res){ if (res.data.meta.status === 401) {//处理token过期 router.push('/login') sessionStorage.clear() window.location.reload() } return res }) Vue.prototype.$http = axios delete: 'delete' } // 请求拦截器 axios.interceptors.request.use(function(req){ const currentUrl = req.url console.log(req); // 不是登录的请求 if (currentUrl !== 'login') { // 添加请求头 req.headers.Authorization = sessionStorage.getItem('token') // 当前模块中具备的权限 // 查看用户 get请求 // 增加用户 post请求 // 修改用户 put请求 // 删除用户 delete请求 const method = req.method // 根据请求, 得到是哪种操作 const action = actionMapping[method] // 判断action是否存在当前路由的权限中 const rights = router.currentRoute.meta // 当前路由的原信息 if(rights && rights.indexOf(action) == -1) { // 没有权限 alert('没有权限') return Promise.reject(new Error('没有权限')) } } return req }) axios.interceptors.response.use(function(res){ if (res.data.meta.status === 401) { router.push('/login') sessionStorage.clear() window.location.reload() } return res }) Vue.prototype.$http = axios