【学习打卡】第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~