Vue中权限控制完全实现

一、菜单权限的实现：

在登录请求中会得到权限数据，当然这个需要后端返回数据的支持，前端根据权限数据展示对应的菜单，点击菜单才能查看相应的界面。

登录之后获取到的数据：

[{path: "/main/data",alias: "/data",name: "data",meta: {title: "统计",icon: "el-icon-house",requireAuth: true},children: [{path: "/main/data/tag",alias: "/tag",name: "tag",meta: {title: "分析",requireAuth: true}},{path: "/main/button",alias: "/button",name: "button",meta: {title: "标准列表",requireAuth: true,rights: ['view']},}]},{path: "/main/form",alias: "/form",name: "form",meta: {title: "表单",icon: "el-icon-document",requireAuth: true},children: [{path: "/main/form/validate",alias: "/validate",name: "validate",meta: {title: "基础表单",requireAuth: true}},{path: "/main/form/step",alias: "/step",name: "step",meta: {title: "分步表单",requireAuth: true}},{path: "/main/form/senior",alias: "/senior",name: "senior",meta: {title: "高级表单",requireAuth: true}}]},{path: "/main/list",alias: "/list",name: "list",meta: {title: "反馈",icon: "el-icon-chat-line-round",requireAuth: true},children: [{path: "/main/list/card",alias: "/card",name: "card",meta: {title: "卡片列表",requireAuth: true}}]},{path: "/main/dashbord",alias: "/dashbord",name: "dashbord",meta: {title: "分析",icon: "el-icon-monitor",requireAuth: true},children: [{path: "/main/dashbord/analysis",alias: "/analysis",name: "analysis",meta: {title: "分析页",requireAuth: true}}]}];

根据此数据动态渲染左侧菜单，数据在Login.vue中登录验证时得到，但是在Nav.vue中才使用，所以可以把数据用Vuex进行维护。

Vuex中代码：

将权限数据存储在sessionStorage中，并让其和Vuex中的数据保持同步，以解决刷新页面菜单消失的问题。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {right_list: JSON.parse(sessionStorage.getItem("right_list") || "[]")},mutations: {set_right_list: (state, data) => {state.right_list = data;sessionStorage.setItem("right_list", JSON.stringify(data));}}
})

submitForm(form) {this.$refs[form].validate(valid => {if (valid) {this.$store.commit("set_right_list", right_list);sessionStorage.setItem("isLogin", 1);this.$router.push({ path: "/tag" });}});}

Nav.vue中代码：

<template><el-menuclass="el-menu-vertical-demo"background-color="rgb(0, 21, 41)"text-color="#fff"active-text-color="#ffd04b":default-active="this.$router.currentRoute.fullPath":unique-opened="true"@open="handleOpen"@close="handleClose":collapse="isCollapse"router><NavItem v-for="v in this.menu_list" :key="v.alias" :item="v" /></el-menu>
</template><script>
import NavItem from "./NavItem";
import { mapState } from "vuex";
export default {data() {return {menu_list: []};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}},props: ["isCollapse"],components: {NavItem},computed: {...mapState(["right_list"])},created() {this.menu_list = this.right_list;}
};
</script>

二、界面权限的控制：

如果用户没有登录，手动在地址栏输入管理界面地址，则应该直接跳转至登录页。

如果登录了但是输入了不存在的地址或者没有权限的地址，则应该跳转至特定页面。

如何判断是否登录？

sessionStorage.setItem("token", res.data.token);

什么时机？

路由导航守卫：

router.beforeEach((to, from, next) => {if (to.path == "/login") {if (sessionStorage.getItem("isLogin") === "1") {next("/tag");} else {next();}} else {if (to.meta.requireAuth && sessionStorage.getItem("isLogin") === "1") {next();} else if (!to.meta.requireAuth && sessionStorage.getItem("isLogin") === "1"){next("/tag");window.location.reload();} else {next("/login");}}
})

至此，已经实现用户必须登录才能查看管理页，但是如果用户没有相应的查看权限而在浏览器中直接输入无权限的地址怎么控制呢？

动态路由

登录成功之后，路由跳转之前添加，或者在刷新页面的时候进入路由导航守卫之前添加。

router.js：

import Vue from 'vue'
import Router from 'vue-router'const ruleMapping = {data: () => import("@/pages/statistics/Index"),tag: () => import('@/pages/statistics/Tag'),button: () => import('@/pages/statistics/StandardList'),form: () => import('@/pages/form/Index'),validate: () => import('@/pages/form/Validate'),step: () => import('@/pages/form/step'),senior: () => import('@/pages/form/senior'),list: () => import('@/pages/list/Index'),card: () => import('@/pages/list/CardList'),dashbord: () => import('@/pages/dashbord/Index'),analysis: () => import('../pages/dashbord/analysis')
}Vue.use(Router);let router = new Router({mode: 'hash',routes: [{path: '/',alias: '/',name: 'index',redirect: '/login'},{path: '/login',alias: '/login',name: 'login',component: () => import("@/pages/login/Index"),meta: {title: 'Login'}},{path: '/main',alias: '/main',name: 'main',redirect: '/tag',component: () => import("@/components/Main"),meta: {title: 'Main'},children: []}]
});export function initDynamicRoutes() {const currentRoutes = router.options.routes;const right_list = JSON.parse(sessionStorage.getItem("right_list"));try {right_list.forEach(item => {item.component = ruleMapping[item.name];item.children.forEach(c_item => {c_item.component = ruleMapping[c_item.name];})})currentRoutes[2].children = right_list;router.addRoutes(currentRoutes);} catch (error) {console.log(error);}
}// 判断是否登录
if (sessionStorage.getItem("isLogin") === "1") {initDynamicRoutes();
}export default routerrouter.beforeEach((to, from, next) => {if (to.path == "/login") {if (sessionStorage.getItem("isLogin") === "1") {next("/tag");} else {next();}} else {if (to.meta.requireAuth && sessionStorage.getItem("isLogin") === "1") {next();} else if (!to.meta.requireAuth && sessionStorage.getItem("isLogin") === "1"){next("/tag");window.location.reload();} else {next("/login");}}
})

其中：

if (sessionStorage.getItem("isLogin") === "1") {initDynamicRoutes();
}

解决刷新后不动态加载对应的权限页面的问题。

submitForm(form) {this.$refs[form].validate(valid => {if (valid) {this.$store.commit("set_right_list", right_list);sessionStorage.setItem("isLogin", 1);initDynamicRoutes();this.$router.push({ path: "/tag" });}});}

三、按钮权限控制

在界面中，还得根据权限数据展示出可进行操作的按钮，比如删除、修改、增加，可以把该逻辑放在自定义指令中：

页面中添加权限代码：

<el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog" v-permission="{action: 'add', effect: 'disabled'}">添加</el-button>

返回的路由中相应的权限信息：

{path: "/main/button",alias: "/button",name: "button",meta: {title: "标准列表",requireAuth: true,rights: ['view']},}

permission.js：

import Vue from 'vue'
import router from '@/router/router'Vue.directive("permission", {inserted: function(el, binding){const action = binding.value.action;const current_right = router.currentRoute.meta.rights;if(current_right){if(current_right.indexOf(action) === -1){const type = binding.value.effect;if(type === "disabled"){el.disabled = true;el.classList.add("is-disabled");} else {el.parentNode.removeChild(el);}}}}
})

main.js中引入指令文件：

import './utils/permission.js'

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import store from './vuex/store'
import router from './router/router.js'
import './utils/permission.js'import echarts from 'echarts'import axios from 'axios'
Vue.prototype.$axios = axiosVue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(echarts)
Vue.prototype.$echarts = echarts/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
})

四、请求和响应权限的控制：

如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成启用状态，此时发的请求应该被前端所拦截。

除了登录，其它所有请求都要带上token，这样服务器才可以鉴别你的身份。

HTTP.interceptors.request.use(function (config) {  const current_url = config.url;if(current_url !== "login"){config.headers.TOKEN = sessionStorage.getItem('TOKEN');}return config;
}, function (error) {return Promise.reject(error);
});

如果发出了非权限内的请求，应该直接在前端访问组织，虽然这个请求发到服务端也会被拒绝：

import axios from 'axios'
import router from '@/router/router'let _this = this;const action_mapping = {get: 'view',post: 'add',put: 'edit',delete: 'delete'
}HTTP.interceptors.request.use(function (config) {const current_url = config.url;if(current_url !== "login"){config.headers.TOKEN = sessionStorage.getItem('TOKEN');const action = action_mapping[config.method];const current_right = router.currentRoute.meta.rights;if(current_right && current_right.indexOf(action) === -1){alert("没有权限");return Promise.reject(new Error("没有权限！"));}}return config;
}, function (error) {return Promise.reject(error);
});