Vuex+Vue Router实现前端功能权限控制

---

我们将要实现的功能

---

1、在用户登录的时候，就根据权限给他跳转到某一个页面，而不一定是首页。
2、没有权限的用户想要访问页面，不给他跳转，并提示。
3、最后啰嗦一点，不管前端咋写的，后端数据接口一定要做足安全验证。
4、某个具体功能的使用权限，本文不讨论了。

---

原理

---

Vuex部分

• store里面要有user的权限列表
• 在用户登录的时候把权限赋值好

这样在前端就有了权限这么个东西，之后就看各自系统需求该怎么用了。

---

Vue Router部分

• routes里面是可以加路由元信息的，我的方案是在meta里加上路由所需权限。
• 设置Vue Router导航守卫router.beforeEach。在进入新的路由前加上权限验证。在这里user的权限列表会派上用场。
• 别忘了权限不足时的提示信息。

---

因为是自己拍脑袋想出来的办法，还请大佬们批评指正！
同时也欢迎大家留言

---

暂时还是不贴代码了，给个参考的思路吧，毕竟cv工程师（误）太多了……

---