vue之前端鉴权
vue项目前端鉴权方式常用的有以下三种:
1、渲染菜单时控制模块按钮的显示隐藏(不足:直接输入链接仍然可以访问模块)
2、在路由导航守卫中拦截,针对没有权限的模块进行重定向(不足:每次访问模块都需要鉴定权限,模块数量过多时会影响系统性能)
3、借助vue-router 2.x版本新加的API addRouters动态添加路由信息(不足:首次加载需要解析和添加,多跳转一次路由)
综上所述,权衡之后选择了addRoutes动态添加,首屏加载时间可能会多出0.5s左右,加载一次之后后续就不需要再进行处理,可以提升系统的可靠性与稳定性。具体使用如下:
1、定义固定路由,用于路由初始化,如:登录页、404页面等
const router = new Router({
// mode: 'history',
// base: base,
routes: [
{
path: '/',
name: '',
component: () => import('@/views/login/login') ,
meta:{label: '登录'}
}
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
}
});
2、路由导航守卫前置拦截
为了方便,将路由权限信息保存到vuex中,在路由跳转时,判断state中是否存在menu信息,如果不存在,则向后端请求权限信息,此部分需要阻塞页面的跳转,改为同步执行;
针对一般菜单嵌套路由,需要对路由信息最好进行扁平化处理,否则可能导致路由重复添加或者添加失败(上级有父组件会导致重复添加,上级没有组件单纯嵌套会导致添加失败)
//刷新页面后,会导致动态生成的路由失效,需要重新走下添加路由操作
let registerRouteRefresh = true; router.beforeEach(async (to, from, next) => {
//如果不存在菜单信息,则走动态授权
if (store.state.menus.length === 0) {
//确保初始化信息完成后才会执行下一步动作
await init();
let nodesList = [];
//递归获取权限菜单列表
initNodes(menuNodes, nodesList);
store.commit('UPDATE_DATA', {
key: 'menus',
value: nodesList
});
//获取路由权限信息
const asyncNodes = getAsyncNodes(nodesList, []);
//添加拥有权限的路由信息
router.addRoutes(asyncNodes);
registerRouteRefresh = false;
next({
...to,
replace: true
})
}else {
//如果是页面刷新,需要重新加载下动态路由
if (registerRouteRefresh) {
let nodesList = [];
//递归获取权限菜单列表
initNodes(menuNodes, nodesList);
//获取路由权限信息
const asyncNodes = getAsyncNodes(nodesList, []);
//添加拥有权限的路由信息
router.addRoutes(asyncNodes);
registerRouteRefresh = false;
//确保路由加载完成
next({
...to,
replace: true
})
}
next()
}
});
注意:
1、由于路由时动态添加的,存储在内存中,页面刷新之后内存中变量也会消失,动态添加的路由也会随之消失,所以每次刷新页面需要重新走一遍添加路由的流程
2、由于路由是动态添加的,在路由跳转时,添加的路由并没有生效,所以还需要多跳转一次页面
除此之外,按钮的鉴权可以通过自定义指令,动态传入条件参数来实现按钮的显示隐藏,指令封装如下:
/**
* 节点鉴权
* {code: menuCode, flag:条件生效取反}
*/
Vue.directive('permission', {
bind(el, binding) {
let vv = binding.value;
if (vv.flag) {
el.style.display = hasPermission(vv.code) ? 'none' : 'block';
} else {
el.style.display = hasPermission(vv.code) ? 'block' : 'none';
}
}
});
使用方法:
<button v-permission="{code: 123}"></button >
vue之前端鉴权的更多相关文章
- 钉钉JSAPI前端鉴权
钉钉二次开发分为如下表所示三种类型的开发,只有企业内部应用才需要对JSAPI鉴权. 类型 开发方式 JSAPI鉴权 应用场景 第三方企业应用 E应用开发 不需要 用于发布到钉钉应用市场,供广大用户下载 ...
- react-router 5.0 的鉴权
react-router 5.0 的鉴权 当我们使用react-router 控制页面的路由时候,有些页面,是需要登录才能访问,有些不需要登录就可以访问,还有些页面,是根据用户的权限来限制访问的. 如 ...
- Vue 给axios做个靠谱的封装(报错,鉴权,跳转,拦截,提示)
需求及实现 统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道可以去了解npm ...
- vue项目中的登录鉴权
用vue做一个简单的登录鉴权功能. 项目目录结构如下: Login 组件 登录成功后做本地存储和store存储,并进行跳转. Login.vue关键代码: async handleLogin(e) { ...
- axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)
Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...
- [转]Node.js 应用:Koa2 使用 JWT 进行鉴权
本文转自:https://www.cnblogs.com/linxin/p/9491342.html 前言 在前后端分离的开发中,通过 Restful API 进行数据交互时,如果没有对 API 进行 ...
- Node.js 应用:Koa2 使用 JWT 进行鉴权
前言 在前后端分离的开发中,通过 Restful API 进行数据交互时,如果没有对 API 进行保护,那么别人就可以很容易地获取并调用这些 API 进行操作.那么服务器端要如何进行鉴权呢? Json ...
- koa2服务端使用jwt进行鉴权及路由权限分发
大体思路 后端书写REST api时,有一些api是非常敏感的,比如获取用户个人信息,查看所有用户列表,修改密码等.如果不对这些api进行保护,那么别人就可以很容易地获取并调用这些 api 进行操作. ...
- 循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志
在一个系统的权限管理模块中,一般都需要跟踪一些具体的日志,ABP框架的系统的日志管理,包括登录日志.接口访问日志.实体变化历史日志,本篇随笔介绍ABP框架中这些日志的管理和界面处理. 1.系统登录日志 ...
随机推荐
- ubuntu14.04编译gnu global 6.6.3
打算重新折腾下环境,看中了gtags ,可参考 Vim 8 中 C/C++ 符号索引:GTags 篇 ,先记录下编译过程 源码 下载并解压源码 最新的代码到官方下载页面获取 https://www.g ...
- wx-all
学习这部分时也学了不少代码,一段一段往这上面写实在有点~~~ 直接把代码部署到代码该在的地方吧,哈哈哈 这是网址 把代码放这上面就好多了,不怕代码丢,还可保证代码完整,嘻嘻嘻~~~~~~
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- js new Date 创建时间默认是8点
起因 最近在写一个页面,需要用到时间控制.然后我通过new Date()传入日期字符串创建了一个对象,并与当前时间做时间戳比较,结果12点刚过,就出问题了.举个栗子 // 假设当前时间是2019年12 ...
- STM32基本GPIO操作:按键输入(扫描+外部中断)
(涉及专有名词较多,难免解释不到位,若有错误还请指出,谢谢!) 硬件连接图如下: 一.扫描 思路是在main函数中通过死循环来扫描端口电平状态检测,以此判断按键是否按下.实现较为简单. 1.初始化(注 ...
- centos6.5安装supervisor
centos6.5安装supervisor,有很多种方法,但是有很多坑,为了以后不重复踩坑,这里记录一下. 一.如果用yum install supervisor, 默认安装的是2.1.9版本,2.x ...
- 如何实现一台服务器同时运行两个php版本
有需要学习交流的友人请加入交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群jq.qq.com 假设您已经安装了Apache,为这两个项目创建了虚拟主机,并添加 ...
- 【解决】[Firmware Bug]: TSC_DEADLINE disabled due to Errata......starting timeout scripts
问题一.[Firmware Bug]: TSC_DEADLINE disabled due to Errata; please update microcode to version: 0x52 (o ...
- Vue+ElementUI的后台管理框架
新开发的一个后台管理系统.在框架上,领导要用AdminLTE这套模板.这个其实很简单,把该引入的样式和js文件引入就可以了.这里就不多赘述了.有兴趣的可以参考:https://www.jianshu. ...
- 好的js书写习惯
1:单一判断 bad if (result) { console.log("秋叶"); } if (!result) { console.log("秋叶"); ...