在项目中从登录到主页的整个过程

何夜读春秋

已于 2023-05-19 23:43:52 修改

阅读量249

点赞数 1

文章标签： javascript 前端 html5 vue.js node.js

于 2023-05-18 22:54:00 首次发布

本文链接：https://blog.csdn.net/Qiang_7950/article/details/130756915

版权

用户登录涉及用户名和密码验证，成功后服务器生成JWT，保存在客户端本地存储。客户端使用JWT进行身份认证，请求主页数据。安全措施包括HTTPS传输和密码哈希。Vue和React等框架提供登录认证支持，Vuex管理状态，请求拦截器处理请求头的JWT，导航守卫负责页面跳转时的权限检查。

摘要由CSDN通过智能技术生成

用户输入用户名和密码，提交登录请求。
服务器端接收请求，验证用户名和密码是否正确。
如果验证成功，服务器会生成一个 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页面), 如果是的话, 也可以放行, 其他情况就需要直接拦截到登录页.