经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 其他 » 网络安全 » 查看文章
vue & nodejs jwt 的基于token身份验证
来源:cnblogs  作者:whyaza  时间:2019/9/30 9:03:48  对本文有异议

现在比较流行的验证方式,是带着token的登录验证

原理

  1. 1. 登陆时,客户端发送用户名密码
  2. 2. 服务端验证用户名密码是否正确,校验通过就会生成一个有时效的token串,发送给客户端
  3. 3. 客户端储存token,一般都会存储在localStorage或者cookie里面(vue可以存储与vuex
  4. 4. 客户端每次请求时都带有token,可以将其放在请求头里,每次请求都携带token
  5. 5. 服务端验证token,所有需要校验身份的接口都会被校验token,若token解析后的数据包含用户身份信息,则身份验证通过,返回数据

完整例子

下面来看一个比较完整的例子,有问题可以和我交流哦,我也挺菜的:
第一步,客户端发送用户名和密码; (一般是post过去)
第二步,验证用户名密码是否正确,校验通过就会生成一个有时效的token串,发送给客户端

  1. if (data.toString() === req.body.pass){
  2. // 登陆成功,添加token验证
  3. let sid = req.body.pass + req.body.seccode; //密码 和 验证码组成其sid
  4. let jwt = new JwtUtil(sid); //将用户sid传入,生成token
  5. let token = jwt.generateToken();
  6. res.send({status:200,msg:'登陆成功',token:token});
  7. }else{
  8. res.send({status:404,msg:'口令错误'})
  9. }

第三步,客户端储存token,一般都会存储在localStorage或者cookie里面(这里我存储在vuex里面,进行统一管理)
第四步,客户端每次请求时都带有token,可以将其放在请求头里,每次请求都携带token

  1. //使用vuex对全局token进行状态管理
  2. this.$store.dispatch("set_token",res.data.token);
  3. //设置:全局带token
  4. this.$http.defaults.headers.common['token'] = this.$store.state.token;

store 里index.js:

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. //使用vuex
  4. Vue.use(Vuex);
  5. //一个store , Vuex.store的 实例
  6. const store = new Vuex.Store({
  7. state: {
  8. token : ''
  9. },
  10. getters:{ // Getter相当于vue中的computed计算属性
  11. getToken: (state) => {return state.token;}
  12. },
  13. mutations: {
  14. set_token(state,ltoken) { //第一个参数是拿到state对象
  15. localStorage.setItem('token',ltoken);
  16. state.token = ltoken;
  17. },
  18. del_token(state) {
  19. localStorage.removeItem('token');
  20. state.token = '';
  21. }
  22. },
  23. actions: { //注册actions,类似vue里面的methods
  24. //通过这个修改state里面的值
  25. // 可以直接用mutations修改,但是官方建议使用actions去调用mutations去修改
  26. set_token(context,token) {
  27. context.commit("set_token",token);
  28. },
  29. del_token(context){
  30. context.commit("del_token");
  31. }
  32. }
  33. })
  34. export default

最后一步,服务端验证token,所有需要校验身份的接口都会被校验token,若token解析后的数据包含用户身份信息,则身份验证通过,返回数据
(这里,除了一些特定接口,不拦截之外,把拦截的 都需要进行验证)
(我这里是: /api/fr/articles 前台获取文章列表的接口不需要拦截; /api/imgCode 生成二维码的接口不需要拦截 /api/lone 登录发token的接口不需要拦截)
其他都需要拦截。

  1. app.use(function (req, res, next){
  2. //一共三个接口不需要拦截:
  3. // /imgCode /lone /api/fr/articles
  4. if (req.url != '/api/fr/articles' && req.url != '/api/imgCode' && req.url != '/api/lone') {
  5. let token = req.headers.token;
  6. let jwt = new JwtUtil(token);
  7. let result = jwt.verifyToken();
  8. console.log('result是:',result);
  9. // 如果考验通过就next,否则就返回登陆信息不正确
  10. if (result == 'err') {
  11. console.log(result);
  12. res.send({status: 403, msg: '登录已过期,请重新登录',res: result});
  13. // res.render('login.html');
  14. } else {
  15. next();
  16. }
  17. } else {
  18. next();
  19. }
  20. });

其中:jwt.js怎么写呢?参考于这篇文章: nodejs 基于token的身份验证

  1. // 引入模块依赖
  2. const fs = require('fs');
  3. const path = require('path');
  4. const jwt = require('jsonwebtoken');
  5. // 创建 token 类
  6. class Jwt {
  7. constructor(data) {
  8. this.data = data;
  9. }
  10. //生成token
  11. generateToken() {
  12. let data = this.data;
  13. let created = Math.floor(Date.now() / 1000);
  14. let cert = fs.readFileSync(path.join(__dirname, '../server/pem/rsa_private_key.pem'));//私钥 可以自己生成
  15. let token = jwt.sign({
  16. data,
  17. exp: created + 60 * 30,
  18. }, cert, {algorithm: 'RS256'});
  19. return token;
  20. }
  21. // 校验token
  22. verifyToken() {
  23. let token = this.data;
  24. let cert = fs.readFileSync(path.join(__dirname, '../server/pem/rsa_public_key.pem'));//公钥 可以自己生成
  25. let res;
  26. try {
  27. let result = jwt.verify(token, cert, {algorithms: ['RS256']}) || {};
  28. let {exp = 0} = result, current = Math.floor(Date.now() / 1000);
  29. if (current <= exp) {
  30. res = result.data || {};
  31. }
  32. } catch (e) {
  33. res = 'err';
  34. }
  35. return res;
  36. }
  37. }
  38. module.exports = Jwt;

公私密钥对,一般可以选择openssl进行生成.

原文链接:http://www.cnblogs.com/whyaza/p/11605314.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号