木灵鱼儿
阅读:2173
如何使用路由管理用户权限
以前弄个一个路由鉴权,其原理就是判断用户是否已经登录,未登录就跳转至登录页。
通过给meta设置一个元数据,然后判断这个页面是否有权限,如果访客没有权限,就跳转至登录页。
这个用于一般情况完全是足够了,但是当你的网站权限分级的情况,就不太够用了,因为已经不能用单纯的是否已登录来判断,访客时候有权限浏览该页面。
多级权限
假设我们网站有四个等级:master(站长)、admin(管理员)、user(注册用户)、guest(游客)
那么最先,我们给路由设置权限,设置哪些等级可以访问
export default [
{
path: "", component: () => import(""),
meta: {
authority: ["master", "admin", "user"],
title: "首页"
}
},
{
path: "/admin", component: () => import(""),
meta: {
authority: ["master", "admin"],
title: "管理页"
}
},
{
path: "/user", component: () => import(""),
meta: {
authority: ["user"],
title: "个人中心"
}
},
{
path: "/login", component: () => import(""),
meta: {
authority: ["guest"],
title: "登录页"
}
}
]
我们有四个页面,每个页面都有不同的浏览器权限。因为有多个层级权限,所以authority是一个数组。
现在原数据有了,我们怎么进行判断呢?
判断是否有权限
这个就很多花样了,每个公司的方式都不一样,这里简单讲一个例子:
后端提供一个鉴权接口,我们可以在进入路由前先请求一次接口,然后获取后端提供的权限。
function getAuthority() {
return "admin";
}
这里就简单模拟下api,最终返回的是一个权限字符串。
function check(metaAuthority) {
const current = getAuthority();
return metaAuthority.includes(item);
}
check接收一个参数,这个参数就是路由的meta.authority,他是一个数组,我们先获取到后台返回的权限字符串,然后判断meta.authority数组中是否存在对应的值,如果有,说明这个人有权限访问该页面。
路由守卫
那么我们可以直接在路由守卫里这样写
router.beforeEach((to, from, next) => {
if (!check(to.matched.some(r => r.meta.authority))) {
//没有权限访问
}
next();
});
没有权限访问有两种情况,一种是用户没有登录,一种是已登录,但是没权限。
所以我们还需要判断下是否登录
function isLogin() {
const current = getAuthority();
return current.every(r => r !== "guest");
}
遍历后端返回的权限数组,然后判断,只要有一个不满足条件,就返回false,所有的遍历条件都通过,返回true。
router.beforeEach((to, from, next) => {
if (!check(to.matched.some(r => r.meta.authority))) {
//未登录
if (!isLogin() && to.path !== "/login") {
next({ path: "/login" });
} else if (to.path !== "403") {
// 已登录但是没有权限
next({ path: "/403" });
}
};
next();
});
用户没有登录就跳转到登录页,由于登录页页是未登录状态,所以防止重复跳转,要加个判断,path不等于login
如果已经登录了,就说明这个人没有权限访问,我们就跳转403错误页,由于也要防止403重复跳转,加个path判断。
需要注意的是,使用了next跳转,不会触发路由的afterEach守卫函数,所以,如果有在beforeEach时调用的等待函数,如进度条效果,那么,使用next后需要手动触发结束,因为不会再进入到afterEach钩子中去了。
导航菜单鉴权
既然用户没权限访问这个页面,最好的办法就是让用户无法点击进入到这个页面,没有入口,体验就好很多,就好像,我这有块肉,你就是吃不到,既然吃不到,当然是眼不见为净了。
已上一章为例,在使用的getMenuData方法获取导航菜单数据的时候,我们可以进行操作,如果用户没有权限,那么就不插入这个路由
getMenuData(routes = []) {
const menuData = [];
//鉴权
for (let route of routes) {
if (
route.meta &&
route.meta.authority &&
!check(route.meta.authority)
) {
//跳出本次循环
break;
}
//鉴权结束
if (route.name && !route.hideInMenu) {
const newRoute = { ...route }; //解构赋值到新变量上
delete newRoute.children; //删除children,因为需要判断
//是否有子级,并且显示
if (route.children && !route.hideChildrenInMenu) {
//递归并赋值
newRoute.children = this.getMenuData(route.children);
}
//一个判断递归结束
menuData.push(newRoute);
} else if (
!route.hideInMenu &&
!route.hideChildrenInMenu &&
route.children
) {
//有子级,但是不隐藏自己,也不隐藏子级
//拿到子级,并将其提升层级,丢到外面
menuData.push(...this.getMenuData(route.children));
}
}
return menuData;
}
我们将forEach循环改为for of循环,这样就可以使用break跳出本次循环。
然后if进行判断,如果这个路由meta存在,并且authority也存在,就判断用户是否有权限访问该页面。
如果没有直接break跳出,这样数据就不会插入到数组中去。
如果存在就按照原来的进行递归处理。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
meta name= viewport 知识补充
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。物理像素:硬件本身的实际像素大小软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)更多的对比可以去这个网站查看:mydevice然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用...

vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...
