手记

【学习打卡】第2天 Vue Element+Node.js开发企业通用管理后台系统(第8章)

课程名称:Vue Element+Node.js开发企业通用管理后台系统(第8章)
课程章节: 第8章 登录功能开发(上)
主讲老师:Sam
课程内容:

今天学习的内容包括:

  • 用户登录流程和技术点分析

围绕用户登录流程进行阐述,并对其延展出来的功能点、技术点进行分析。理解了这个登录流程,对于一般企业的中后台开发都有很大的帮助。

课程收获:

登录全流程解析

在前端会有一个用户登录页面,用户通过输入用户名和密码,向后端发起请求,后端接收到传入过来的用户名、密码后进行验证,当验证通过后会通过 jwt 生成 token(可以理解为一个登录的令牌,有了这个令牌后续的请求,就不需要携带用户名和密码了,只要在 http header 携带令牌即可),前端收到 token 后,需要进行保存,便于后续其他页面进行使用。例如,在请求用户信息的时候,将 token 附带至 http header 传输到后端,后端接收到之后,首先进行 token 校验,当验证通过后,会将所需的用户信息返回给前端。最后前端根据用户权限生成菜单。

上述流程中包含的要点:

1. 路由和权限校验

路由场景分析,常见情况如下:

(1)已获取 Token:

  • 访问 /login:重定向到 /
  • 访问 /login?redirect=/xxx:重定向到 /xxx
  • 访问 /login 以外的路由:直接访问 /xxx

(2)未获取 Token:

  • 访问 /login:直接访问 /login
  • 访问 /login 以外的路由:如访问 /dashboard,实际访问路径为 /login?redirect=%2Fdashboard,登录后会直接重定向 /dashboard

路由处理逻辑图如下:

2. 动态路由

动态路由生成逻辑如下图:

用户登录系统时,会动态生成路由,其中 constantRoutes 必然包含,asyncRoutes 会进行过滤。asyncRoutes 过滤的逻辑是看路由下是否包含 meta 和 meta.roles 属性,如果没有该属性,所以这是一个通用路由,不需要进行权限校验;如果包含 roles 属性则会判断用户的角色是否命中路由中的任意一个权限,如果命中,则将路由保存下来,如果未命中,则直接将该路由舍弃;asyncRoutes 处理完毕后,会和 constantRoutes 合并为一个新的路由对象,并保存到 vuex 的 permission/routes 中。用户登录系统后,侧边栏会从 vuex 中获取 state.permission.routes,根据该路由动态渲染用户菜单。

最后,附上一张课程学习截图,ending~

0人推荐
随时随地看视频
慕课网APP