其实本篇博客的篇幅可能会比较长,所以会分两次来写。
那么开始吧。

利用token来验证用户的身份可以分为以下几步,之后再逐步分析。
1.用户在前端提交表单到后端
2.后端根据表单信息生成token返回给前端
3.前端将token取出,存储到localStorage以及vuex中
4.当用户再次发起请求时,使用axios拦截器在请求头加上token(后端需要在设置跨域的地方设置可接受跨域的字段)
5.后端收到请求后取出请求头中的token与数据库中的token进行对比,如果一致则说明用户验证通过。(还未写完)
 

第一步:用户在前端提交表单到后端。
我们先来看前端的代码,

当点击登录按钮时,会触发login函数,这里将数据发送到http://localhost:3000/auth/login,也就是后端的登录接口

 

第二步:后端根据表单信息生成token返回给前端.
这一步我们要进入node部分的代码了,我们看一下node对表单数据进行了什么处理。

这部分写的比较粗暴,因为是边学边写的,所以暂时只注重功能上的实现。
那么首先这里通过req.body获得了表单的用户密码,之后我们通过查询语句在数据库中查询对应的用户。这个地方使用了promise来控制数据库操作的一个同步,这是因为这个地方有两个跟数据库有关的操作,一个是查询是用户,一个是如果查找到了用户,还需要进行插入数据库的操作,那么为了保持这两个操作的先后顺序,这里就将插入的操作放在了then的回调中(下面会贴上代码。)
对于查询到的数据,我通过JSON.parse(JSON.stringify(result))将查询的结果转为了数组,这是为了方便我们之后的操作,
显然如果查询到了用户,那么数组长度肯定是大于0的,所以当user.length === 0时,说明用户可能输入有误,因此我们在响应的代码中reject({state: 1, message: '输入的用户名或密码有误'})。
反过来说,现在假设查询到了用户,那么代码的逻辑就会跳到最第二个else,此时我们对查询到的用户信息利用jwt加密(jwt是jsonwebtoken,可以在项目中用npm下载),jwt.sign的第二个参数是加密用的密钥字符串,可以自行决定密钥。
加密完成后,下一行代码的resolve{state, username, password, token}),表示要将这些数据发到then()的回调函数中,我们通过then中的回调函数将这些数据插入数据库


这里的代码很简单,主要看到最后的else语句,这里除了将相应的信息和token插入数据库,后端还需要将token返回给前端,所以在res.send中写上token,以便前端能够接收到。

 

第三步:前端将token取出,存储到localStorage以及vuex中
由于我们发送的是axios请求,而aioxs请求是支持promise的api的,因此我们也可以在发送请求的后面加上then()来接收后端返回的数据。我们可以在控制台中将接收到的结果打印出来看一下。


因此,我们就可以在then的回调中将接收到的数据分别存储到localStorage跟vuex中啦。
 

第四步:当用户再次发起请求时,使用axios拦截器在请求头加上token(后端需要在设置跨域的地方设置可接受跨域的字段)
由于已经登录过了,所以用户就有了token,那么当我们再次向后端发起请求的时候,就需要在headers中加上token。
因为我们用的是aioxs发送请求,所以在发送请求之前,我们应该使用axios拦截器拦截请求,给headers加上tokon.
需要注意的就是,我们应该将这段代码写在一个单独的文件,然后在main.js导入。
那么我们看一下这段代码,config我们可以在上面的那张在控制台接收到的数据的图中看到,实际上就是一些配置信息。
因此如果用户已经登录过了,那么此时vuex中的state中的token肯定是有值的,所以只要这个if判断成立,就会给这个headers加上一个字段Authorization,值为token,这样我们就在发送请求之前给headers加上token了。当然到了这一步还不行,我们还需要在后端设置跨域,

我们还需要在这个允许接收的请求头上加上一个Authorization,这样我们才能够将数据发送过去,否则就会出现跨域的报错。

Logo

前往低代码交流专区

更多推荐