图解:
用户登录到主页的完整流程通常涉及多个步骤和不同的技术。下面是一个基本的登录到主页的流程：
- 用户输入用户名和密码，提交登录请求。
- 服务器端接收请求，验证用户名和密码是否正确。
- 如果验证成功，服务器会生成一个 JSON Web Token（JWT），用于标识该用户的身份，并将其返回给客户端。
- 客户端接收到 JWT 后，通常会将其保存在浏览器的本地存储（localStorage）中，以便之后的请求能够使用该令牌进行身份认证。
- 客户端重定向到主页，或者通过 AJAX 请求获取主页的数据。
- 在每个需要身份认证的请求中，客户端会在请求头中添加一个名为 "Authorization" 的字段，值为 "Bearer [JWT]"，其中 [JWT] 是保存在本地存储中的 JWT 令牌。
- 服务器端验证请求头中的 JWT 是否有效，如果有效，则继续处理该请求，否则返回错误响应。
除了上述基本流程外，还可以采用其他一些安全措施，例如使用 HTTPS 协议传输数据，对密码进行哈希加密等。此外，前端框架如 Vue、React 等也提供了相关的库和组件来简化登录和身份认证的流程，开发人员可以根据实际需求选择相应的技术方案。
详细:
- 在登录页面(login/index.vue),输入账号和密码, 点击登录按钮, 进行兜底校验, 校验通过后发送登录请求, 使用this.$store.dispatch调用封装在(store/modules/user.js)中的actions中的登录请求
- 登录请求封装在(api/user.js)中, 登录成功后提示用户(登录成功), 将接口返回的token保存到本地和vuex/state中,
- 在(utils/request.js)中有接口的基地址和请求拦截器, 在请求拦截器中拦截请求, 并判断有没有拿到token, 如果拿到了token, 就将token携带在请求头中, 根据接口需求看需不需要在token前面拼接字符串
- 登录完成并保存token后, 需要跳转到首页, 而跳转到首页又需要经过封装在(permission.js)中的"导航守卫", 前置导航守卫的功能: 1. 在每次跳转到下一个页面之前进行拦截, 比如跳转到首页, 需要判断有没有token, 如果有, 就可以跳转到首页, 并在跳转之前发出一个请求(获取用户特殊的信息, 例如: 头像, 名称, 等级权限)以便渲染到首页. 如果没有token, 就判断是否去的是白名单内的地址(例如:登录页,注册页.404页面), 如果是的话, 也可以放行, 其他情况就需要直接拦截到登录页.
