vue项目实现前端权限控制

前端权限的意义

1.前端权限就是控制前端的视图层的展示和前端所发送的请求。
2. 前端权限的控制，主要由这几方面的好处
（1）降低非法早操作的可能性
（2）提高用户体验
（3）尽可能排除不必要的请求，减轻服务器的压力

前端权限的控制思路

一.菜单的控制
在登录请求中，会得到权限数据，这个需要后台返回数据的支持，前端根据权限的数据，展示对应的菜单，点击菜单，才能查看相关的界面
二.界面的控制
如果用户没有登录，手动在地址栏敲入管路界面的地址，则需要转到登录界面
如果用户已经登录，可以手动敲入非权限被的地址，则需要跳转到界面
三.按钮的控制
在某个菜单的界面中，还的根据权限数据，展示出可以进行操作的按钮，如果删除，修改，新增
四.请求和响应的控制
如果用户通过非常规的操作，比如通过浏览器调试工具将一些禁用的按钮变成启用状态，此时发的请求，也应该被前前端所拦截

Vue项目中前端权限的实现

一.菜单权限的实现

(一).把登录接口返回后的权限数据存入store中，共享菜单的数据
1.login.vue页面

  login() {this.$refs.loginFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.post('login', this.loginForm)if (res.meta.status !== 200) return this.$message.error('登录失败！')console.log(res)// res.right为后台返回的的菜单数据this.$store.commit('setRightList', res.rights)this.$message.success('登录成功')this.$router.push('/home')})}

2.Store.js模块

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({//把后台返回的菜单数据存入Storestate: {rightList: []},mutations: {setRightList(state, data) {state.rightList = data;}},actions: {},getters: {}
})

3.在home.vue页面中使用store.js中保存的菜单数据rightList

import {mapState} from 'vuex';
export default {data() {return {// 左侧菜单数据(把menulist绑定到<el-submenu  v-for="item in menulist"  :key="item.id">进行遍历展示)menulist: [],}},created() {this.menulist = this.rightList;},computed: {...mapState(['rightList'])},
}

解决刷新页面菜单消失的问题
*将rightList保存到sessionStorage中使数据持久化
Store.js模块

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({state: {// 初始化rightList，从而解决刷新页面菜单消失的问题rightList: JSON.parse(sessionStorage.getItem('rightList') || '[]'),},mutations: {setRightList(state, data) {state.rightList = data;// 把rightList保存到本地sessionStoragesessionStorage.setItem('rightList', JSON.stringify(data));}},actions: {},getters: {}
})

二.界面权限的实现
（1）.判断只有登录成功后才能访问登录以外的其他页面

// login.vue页面methods: {login() {this.$refs.loginFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.post('login', this.loginForm)if (res.meta.status !== 200) return this.$message.error('登录失败！')// console.log(res)// 登录成功把token存到本地sessionStoragesessionStorage.setItem('token', res.data.token)this.$message.success('登录成功')this.$router.push('/home')})}}

//router.js模块
//路由导航守卫中配置如下:
router.beforeEach((to, from, next) => {if (to.path === '/login') {next();} else {const token = sessionStorage.getItem('token');if (!token) {next('/login');} else {next();}}
});

（2）请求和响应的权限的控制.

import axios from 'axios'
import Vue from 'vue';
import router from '@/router.js';
// 配置请求的跟路径, 目前用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((req) => {if (req.url !== 'login') {//把token存放到请求头中req.headers.Authorization = sessionStorage.getItem('token');const action = actionMapping[req.method];const currentRight = router.currentRoute.meta;// 判断非法操作警用按钮if (currentRight && currentRight.indexOf(action) === -1) {alert('没有权限');return Promise.reject(new Error('没有权限'));}}return req;
});// 响应拦截器
axios.interceptors.response.use((res) => {if (res.data.meta.status === 401) {//token过去的处理router.push('/login');sessionStorage.clear();window.location.reload();}return res;
});
Vue.prototype.$http = axios;

三.动态路由的实现

// 路由规则的配置
import Vue from 'vue'
import Router from 'vue-router'
// 引入store 获取数据rightList
import store from '@/store';
Vue.use(Router)
const router = new Router({routes: [{ path: '/', redirect: '/home' },{ path: '/login', component: Login },{path: '/home',component: Home,redirect: '/welcome',children: [{ path: '/welcome', component: Welcome },]},// 匹配不到走着比如(404){path: '*',component: NotFound}]
});
// 路由规则的配置
const userRule = { path: '/users', component: Users };
const roleRule = { path: '/roles', component: Roles };
const goodRule = { path: '/goods', component: GoodsList };
const categoryRule = { path: '/categories', component: GoodsCate };
//路由规则和字符串的映射
//字符串是后台返回的菜单数据中的path
const ruleMapping = {'users': userRule,'roles': roleRule,'goods': goodRule,'categories': categoryRule
};export function initDynamicRoutes() {// 根据二级权限，对路由规则进行const currentRoutes = router.options.routes;const rightList = store.state.rightList;// 从store拿到rightList菜单数据进行遍历rightList.forEach(item => {// rightList菜单的二级路由数据进行遍历item.children.forEach(item => {const temp = ruleMapping[item.path];// 二级路由的添加currentRoutes[2].children.push(temp);})});router.addRoutes(currentRoutes);
};

*解决刷新页面动态路由消失的问题

//在app.vue组件中初始化动态路由
import { initDynamicRoutes } from '@/router.js';
export default {name: 'app',created() {initDynamicRoutes()}
}

四.页面新增，删除，修改按钮的权限控制.

//自定义指令@/utils/permission.js模块代码如下
import Vue from 'vue';
import router from '@/router.js';
Vue.directive('permission', {inserted(el, binding) {const action = binding.value.action;const effect = binding.value.effect;  if (router.currentRoute.meta.indexOf(action) == -1) {if (effect === 'disabled') {el.disabled = true;el.classList.add('is-disabled');} else {el.parentNode.removeChild(el);}}    }
});

      <!--在组件中使用这个指令--><el-table-column label="操作" width="180px"><template slot-scope="scope"><!-- 修改按钮 --><el-button type="primary" icon="el-icon-edit" v-permission = "{action:'edit', effect: 'disabled'}"size="mini"></el-button><!-- 删除按钮 --><el-buttontype="danger"icon="el-icon-delete"size="mini"v-permission = "{action:'delete', effect: 'disabled'}"@click="removeById(scope.row.id)"></el-button></template></el-table-column>

vue项目实现前端权限控制相关推荐

如何用 Vue 实现前端权限控制
本文来自作者雅X共赏在 GitChat 上分享「如何用 Vue 实现前端权限控制(路由权限 + 视图权限 + 请求权限)」,「阅读原文」查看交流实录. 「文末高能」编辑 | 哈比为什么做前端 ...
《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
基于Vue实现后台系统权限控制
原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue这类双向绑定框架做后台系统再适合不过,后台系统相比普通前端项目除了 ...
你不知道的前端·权限控制篇之中后台系统
一.前言你不知道的前端之--中后台系统的权限控制,总的来说可以分为两大类,页面权限与按钮权限. 如果说编程的职业道路就像是在游戏中打怪升级的话,那么走这个分支练级的童鞋,首先要面对的第一只劝退bos ...
vue实现页面权限显示_Vue 实现前端权限控制
登录&&权限流程图前言首先我们确定的权限控制分为三大部分,其中根据粒度大小分的更细: 登录权限控制页面权限控制菜单中的页面是否可以被访问页面中的按钮 (增.删.改.查)的权限 ...
Vue 进阶系列丨权限控制 addRoute()
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...
vue项目微前端试水
文章目录微前端概念主应用(安装qiankun) 1.存放注册的微应用 2.注册微应用 3.启动微应用微应用(无需安装依赖) 1.修改运行时的public-path 主要解决的是微应用动态载入的 ...

vue项目实现前端权限控制

前端权限的意义

前端权限的控制思路

Vue项目中前端权限的实现

vue项目实现前端权限控制相关推荐

最新文章

热门文章