Vuex+Vue Router实现前端功能权限控制
我们将要实现的功能
1、在用户登录的时候,就根据权限给他跳转到某一个页面,而不一定是首页。
2、没有权限的用户想要访问页面,不给他跳转,并提示。
3、最后啰嗦一点,不管前端咋写的,后端数据接口一定要做足安全验证。
4、某个具体功能的使用权限,本文不讨论了。
原理
Vuex部分
- store里面要有user的权限列表
- 在用户登录的时候把权限赋值好
这样在前端就有了权限这么个东西,之后就看各自系统需求该怎么用了。
Vue Router部分
- routes里面是可以加路由元信息的,我的方案是在meta里加上路由所需权限。
- 设置Vue Router导航守卫
router.beforeEach
。在进入新的路由前加上权限验证。在这里user的权限列表会派上用场。 - 别忘了权限不足时的提示信息。
因为是自己拍脑袋想出来的办法,还请大佬们批评指正!
同时也欢迎大家留言
暂时还是不贴代码了,给个参考的思路吧,毕竟cv工程师(误)太多了……