【项目实战】纯前端实现菜单权限以及功能权限控制

最新推荐文章于 2025-10-06 13:00:00 发布

原创

最新推荐文章于 2025-10-06 13:00:00 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

版权与解释权归本博客博主所有转载请注明出处，否则追究其法律责任！

文章标签：

#vue.js

本文介绍了一种纯前端实现的路由权限控制方案，通过将不同角色的权限标识存储于Vuex中，结合路由守卫判断用户是否有访问特定路由的权限，有效防止越权访问。

先来讲一下需求

我们做项目的时候，最开始功能菜单都是从后端获取的，开发完毕之后，发现可以越权访问没有的路由，其操作是，

登陆高权限的账号，进入功能页，查询的数据，复制当前路由，再登陆低权限的账号，直接复制到地址栏，就能看到高权限账号的页面，

这样后端就很头大了，由于只能对接口限制，后端监听不到当前路由是什么，而且接口还有复用的功能，做起来就很麻烦。我们就考虑了纯前端做路由权限

我先说一下原理，就是登陆账号都会有不同的菜单权限，通过登陆的账号不同做一个规定，账号类型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