vue+vuex+axios+node,利用token验证实现用户登录（一）

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

利用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，这样我们才能够将数据发送过去，否则就会出现跨域的报错。
是