先来讲一下需求
我们做项目的时候,最开始功能菜单都是从后端获取的,开发完毕之后,发现可以越权访问没有的路由,其操作是,
登陆高权限的账号,进入功能页,查询的数据,复制当前路由,再登陆低权限的账号,直接复制到地址栏,就能看到高权限账号的页面,
这样后端就很头大了,由于只能对接口限制,后端监听不到当前路由是什么,而且接口还有复用的功能,做起来就很麻烦。我们就考虑了纯前端做路由权限
我先说一下原理,就是登陆账号都会有不同的菜单权限,通过登陆的账号不同做一个规定,账号类型1,权限标示就是1,账号类型2,权限标示就是2,这里账号类型指的就是,是系统管理员,还是普通用户,还是管理员的角色类型,等定义好这了以后,登陆的时候把当前角色存到vuex中,在每次进入路由之前,先判断这个功能路由有没有这个权限,有的话准许进入,没有的话跳转到首页,
好了,话不多说,上代码
在请求登陆的时候,拿到登陆信息,把该账户的权限放到vuex中
if(res.info[0].children.some(it => it.path == approvalHistory)){
role = 4;
}else if(res.info[0].children.some(it => it.path == vendorFirstTrial)){
role = 1;
}else if(res.info[0].children.some(it => it.path == vendorSecondTrial)){
role = 2;
}else if(res.info[0].children.some(it => it.path == vendorFinalTrial)){
role = 3;
}
this.$store.commit("setRolePermissions",role)
在src >main.js,的目录下,写判断路由是否跳转到首页的代码
router.beforeEach((to,from,next)=>{
let homePath = '/admin/home';
if(to.meta.tabname){
if(to.meta.keepalive){
store.commit('pushCacheComp', to.name)
}
console.log(to.meta.role, store.state.rolePermission)
// next();
if(to.path == homePath || to.meta.role.includes(store.state.rolePermission)){
next();
}else{
if(from.path != homePath){
}
next(homePath);
}
接着在路由文件中写上该路由有什么权限 就是role
{
path: '/admin/vendorFirstTrial',
name: 'vendorFirstTrial',
meta: {
tabname: '厂商备案管理(初审)',keepalive: false,
breadcrumb: '厂商备案管理(初审)',
role: [1,5],
},
component: vendorFirstTrial
},
{
path: '/admin/checkFirstTrial',
name: 'checkFirstTrial',
meta: {
tabname: '查看厂商备案管理(初审)',keepalive: false,
breadcrumb: '查看厂商备案管理(初审)',
role: [1,5],
},
component: checkFirstTrial
},
这样就可以通过不同账户来完美限制不能访问哪些路由了