前端面试：你的项目中如何进行用户身份验证？

面试情景

面试官项目中有做登录验证的功能吗是怎么实现用户身份验证的呢

回答使用了jsonwebtoken这种机制也就是jwt如果用户是第一次登录服务端会将用户信息用密钥签名然后将签名附在用户信息即payload后面最后生成jwt token发回给客户端。

回答客户端下次发送请求时会携带这个jwt token服务端对jwt token中的签名部分解密得到用户登录信息再和jwt token中的用户信息比对从而验证用户身份。

面试官你的项目中jwt选择保存在什么地方有没有考虑安全性

回答前端拿到之后存储在localStorage中每次调用接口的时候放在HTTP请求头的Authorization字段里面。但存放在web存储之中的缺点是容易遭受到XSS攻击。

当然jwt也可以存放在cookie中可以制定httponly来防止被JavaScript读取也可以制定secure来保证token只在HTTPS下传输。但这样做的缺点是容易遭受CSRF攻击。

面试官说说jwt和token的区别

jwt和token其实都会根据用户信息签名之后生成一个token发回给客户端相似度很高只不过使用token机制时解密token后需要用解密出来的数据再去数据库查询用户信息但如果使用jwt机制jwt token中已经包含了用户信息可以直接比对验证不用查询数据库。

在node.js中使用jsonwebtoken

用npm工具安装完jsonwebtoken后调用sign函数就可以对用户信息进行签名然后直接生成最后的jwt token调用verify函数可以对jwt token进行验证

const jwt = require('jsonwebtoken')
let jwtToken = jwt.sign('user1','privateKey');
let payLoad = jwt.verify(jwtToken,'privateKey')
console.log(jwtToken,payLoad);

但sign函数生成jwt token的细节是怎么样的呢sign函数的第二个参数是密钥将密钥和经过base64编码后的用户信息实际上也包含header信息进行拼接然后再进行一次单向的哈希运算就得到了签名signature。可以看出密钥在这里所扮演的角色其实就是盐值salt。

jwt token就是由表示签名算法的header表示用户信息的payload前两部分签名所得的signature这三部分拼接而成的彼此之间用.隔开。

后端的一些应该在登录后才能用的接口必须被保护起来就需要先做jwt token的验证只有验证成功之后才允许放行去访问登录后才能请求的接口。