16 | 实战痛点2：项目开发中的权限系统

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣。
在上一讲中，我们使用组件库完成了项目的搭建，并且引入了 Element3 和 axios 等基础库。基于 Element3，我们可以很方便地使用组件搭建项目。而使用 axios，可以很方便地获取后端数据。在项目中，权限系统的控制需要前后端配合完成，而且权限系统也是后端管理系统中常见的一个难点。不过，今天我们主要从前端的角度，来聊一下项目的权限系统。
下面，我们先从登录权限谈起，因为登录权限对于一个项目来说是必备的功能模块。完成了登录选项的设置后，下一步需要做的是管理项目中的页面权限，而角色权限在这一过程中则可以帮助我们精细化地去控制页面权限。
登录权限继续上一讲我们搭建起来的项目，你可以看到现在所有的页面都可以直接访问了，通常来说管理系统的内部页面都需要登录之后才可以访问，比如个人中心、订单页面等等。首先，我们来设计一个这样的权限限制功能，它能保证某些页面在登录之后才能访问。
为了实现这个功能，我们首先需要模拟登录的接口和页面。我们先新增路由页面，进入到项目目录下，在 router.js 中新增路由配置。下面的代码中，routes 数组新增 /login 路由访问。
  import Login from '../components/Login.vue'
  const routes = [
  ...
  {
    path: '/login',
    component: Login,
    hidden: true,
  }
  ]

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文详细介绍了在项目开发中权限系统的实战应用。首先讨论了登录权限的重要性，并介绍了如何在前端项目中实现登录认证和权限控制。文章详细介绍了模拟登录接口和页面、token的生成和存储，以及通过axios实现前端网络请求的token限制。此外，作者还介绍了使用vue-router的导航守卫实现页面跳转权限认证的方法。文章还涉及了RBAC权限管理机制，以及动态路由的实现方法。最后，文章对token和cookie的区别进行了解释，并指出了基于token的权限解决方案在前后端分离场景下的优势。整体而言，本文通过实际代码和示例，详细介绍了前端项目中权限系统的实现方法，对于需要了解项目权限系统的读者具有一定的参考价值。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(31)

最新
精选

关关君
使用老师之前的代码按照文章的流程实现： 1. mock数据 2. jwt生成Token验证 3. 拦截器Token加头 4. 路由守卫权限验证 5. 登录逻辑对前端了解不全面的同学克隆下来看看整个流程代码，希望对你有帮助 https://github.com/yanbinkwan/Vite-Course git clone https://github.com/yanbinkwan/Vite-Course.git
作者回复: cool ! 非常好的实战经验
2021-11-24
3
31
ll
大圣讲的很详细，点赞，我在课后还是要实际写遍代码，跑起项目来才能更好的吸收知识。另外关于登录状态有个疑问，网上搜索了下，不确定是否叫做，多点登录状态限制问题。就是像极客时间这种网页登录后，在别的设备登录后，这边就下线了。我能猜到的大概有两种方式： 1. 轮询查询，setInterval 之类的定时器，定时查询，然后我打开dev-tool的Performance发现是有定时任务在跑，不过代码最小化过，不太容易看。 2. webSocket 长链接，某个设备登录以后用webSocket之类的方式保持长连接，其他设备登录后，登录状态改变，服务端发个下线的指令这种。已上，望指教，大概的思路或有相关文章就好，谢谢
作者回复: 其实最简单的方式就是设置一个缓存层比如redis存储token，每次登录都生成新的token，会吧之前的token覆盖掉，校验的时候从缓存校验一次就可以实现
2021-11-22
7
23
Geek_liuke
做项目的时候遇到过大厂后台不愿意做token过期判断的情况。只有前端自己设置token过期时间和判断，需要在axios里增加一个每成功调用一次接口就自动延长token期限的逻辑。在页面中还需要增加一个watch，监听token期限的变化，期限到了或者token被清空了就自动跳转到登录页去。
作者回复: 我做过类似的需求，是对接了三个系统，三个token的过期时间不一样
2021-11-22
4
9
Geek_e97208
路由控制权限感觉是个伪命题，项目实际情况都是无权限看不到具体按钮或者菜单。不会给用户点了菜单结果是404。大圣觉得呢
作者回复: 路由和菜单绑定一起控制权限，用户肯定是是看不到按钮的，路由的控制主要是防止直接输入对应地址的访问还有一种情况是有些页面你想让用户看到，但是用户点进去需要升级或者付费才能有权限，入口打开但是不能访问，具体怎么控制其实要看具体的需求
2021-12-15
2
7
海阔天空
权限系统确实是实战疼点。token 的过期时间认证是由后端来实现和完成的。所以我们需要做http请求的响应拦截。以此判断是否登录和是否登录过期。请问老师，如果做了响应拦截，是否还需要路由守卫呢？如果使用路由守卫？
作者回复: 其实也需要，因为请求拦截需要数据返回后，页面拦截可以在跳转之前，体验会更好
2021-11-22
4
6
coder
还是没代码啊，非前端同学表示太难受了
作者回复: 现在代码都集中推到这个仓库里 https://github.com/shengxinjing/geektime-vue-course
2022-01-10

4
cwang
如果在任意一个页面里，我们想实现按钮级别的权限认证，那我们应该如何扩展我们的权限系统呢？按钮级别的权限，是跟角色对应的。具体实现上，可以使用Vue自定义指令，但是某些情况自定义指令会很鸡肋，需要配合v-if 模板语法来实现。
作者回复: 大部分场景封装一个v-auth指令
2021-12-09

3
。。。
希望结合一个项目从零到运用来结合讲解更能理解这样太散了
编辑回复: 后面组件设计部分会带着大家用代码体验一下。
2021-12-02

2
Bob
大圣老师，这一节在https://github.com/shengxinjing/geektime-vue-course.git这个仓库里好像没有文中提到的代码，是还没有来得及更新吗？
作者回复: 这几天我赶完手写vue源码的稿子和代码后会更新一版
2021-12-15
6
1
葱味黑咖啡
"在页面刷新的时候，通过 src/router/index.js 入口文件中的 routes 配置，从 localStorage 中获取完整的路由信息"。老师，有一个问题，路由对象的component可以存储在localStorage中吗？localStorage应该是只能存字符串吧，把路由信息json化之后，component也无效了，这个怎么解决
作者回复: localstorage或者网络接口中存储的权限数据，component保存的其实是字符串，也就是compoennt的名字
2021-12-01



收起评论