vue+express生成token方式

 更新时间:2024年08月28日 09:20:28   作者:江一铭  
这篇文章主要介绍了vue+express生成token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue+express生成token

在使用vue+node开发的过程中,在写登录时候我们会使用到token验证,下面我来分享一下express生成token和简单的使用

安装

npm install express-jwt
npm install jsonwebtoken --save
  • express-jwt内部引用了jsonwebtoken,对其封装使用。在实际的项目中这两个都需要引用,他们两个的定位不一样。
  • jsonwebtoken是用来生成token给客户端的,express-jwt是用来验证token的。

新建token.js文件

//用于生成和解析token
var jwt = require('jsonwebtoken');
var signkey = 'zxcvbnmpoiuy';//自定义秘钥

exports.setToken = function (phone, pasaWord) {
    return new Promise((resolve, reject) => {
        const rule = {
            phone: phone,
            pasaWord: pasaWord
        }
        // rule 账号密码 expiresIn 失效时间
        const token = jwt.sign(rule, signkey, { expiresIn: '1h' });
        resolve(token);
    })
}

exports.verToken = function (token) {
    return new Promise((resolve, reject) => {
        var info = jwt.verify(token.split(' ')[1], signkey);
        resolve(info);
    })
}

app.js中配置

var vertoken = require('./utils/token');
var expressJWT = require('express-jwt');

// 解析token获取用户信息
app.use(function (req, res, next) {
// authorization 必须为这个  和前端保持一致
  var token = req.headers['authorization'];

  if (token == undefined) {
    return next();
  } else {
    vertoken.verToken(token).then((data) => {
      req.data = data;
      return next();
    }).catch((error) => {
      return next();
    })
  }
});


//验证token
app.use(expressJWT({
  secret: 'zxcvbnmpoiuy', // signkey 自定义秘钥 需跟上方保持一致
  algorithms: ["HS256"]
}).unless({
  path: ['/users/addUsers', "/users/login"]//除了这些地址,其他的URL都需要验证
}));


// 错误处理
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message
  res.locals.error = req.app.get('env') === 'development' ? err : {}
  // render the error page
  res.status(err.status || 500)

  if (err.status == 401) {
    res.send(httpRequest.untoken())
  } else if (err.status == 404) {
    res.send(httpRequest.notFound())
  } else {
    res.send({ code: err.status, data: {}, msg: err.status })
  }
})

在接口中使用

// token 验证
var jwt = require('jsonwebtoken');
var Ctoken = require('../utils/token');

router.post('/login', async function (req, res, next) {
  let bady = {
    phone: req.body.phone,
    passWord: req.body.passWord,
  }
  //登录前查询数据库有无此账号
  const data = await User.find().where({
    phone: req.body.phone
  })
  if (data.length == 0) {
    res.send({
      code: 500,
      success: false,
      msg: "该用户没有注册。请先前往注册"
    })
    return
  }
  // 验证密码
  if (data.length != 0 && data[0].passWord !== req.body.passWord) {
    res.send({
      code: 500,
      success: false,
      msg: "密码错误,请重新验证"
    })
    return
  }

  Ctoken.setToken(bady).then((data) => {
    let CObj = {
      code: 200,
      msg: "登录成功",
      token: data
    }
    res.json(CObj);
  });
})

错误

expressjwt is not a function

版本太高。

只需要将pakage.json中的express-jwt版本改为6.1.1,重新npm i 即可使用。

express-jwt新特性请自行前往npm官网查看。

algorithms should be set

在app.use(expressJWT) 这个配置中添加 algorithms: [“HS256”];

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现路由懒加载及组件懒加载的方式

    vue实现路由懒加载及组件懒加载的方式

    懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
    2019-06-06
  • Vue2.x通用条件搜索组件的封装及应用详解

    Vue2.x通用条件搜索组件的封装及应用详解

    这篇文章主要为大家详细介绍了Vue2.x通用条件搜索组件的封装及应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue获取微博授权URL代码实例

    Vue获取微博授权URL代码实例

    这篇文章主要介绍了Vue获取微博授权URL代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • vue用vis插件如何实现网络拓扑图

    vue用vis插件如何实现网络拓扑图

    这篇文章主要介绍了vue用vis插件如何实现网络拓扑图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 详解vue中router-link标签所必备了解的属性

    详解vue中router-link标签所必备了解的属性

    这篇文章主要介绍了vue中router-link标签所必备了解的属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue路由组件传递参数的六种场景

    Vue路由组件传递参数的六种场景

    在Vue应用程序中,路由组件是构建单页应用的关键部分,传递参数给路由组件可以让我们动态地展示内容,处理用户输入,以及实现各种交互功能,本文就给大家介绍了六种Vue路由组件传递参数场景,需要的朋友可以参考下
    2023-09-09
  • 浅析Vue2和Vue3中双向绑定机制的优化与差异

    浅析Vue2和Vue3中双向绑定机制的优化与差异

    Vue.js 核心特性之一就是双向绑定,本文将深入探讨 Vue2 和 Vue3 在双向绑定上的区别,并分析这些改进对性能和开发体验的影响,希望对大家有所帮助
    2024-11-11
  • Vue Form表单的使用方法(rules格式校验网络校验键盘按键监听)

    Vue Form表单的使用方法(rules格式校验网络校验键盘按键监听)

    本文介绍了在Vue.js中使用表单校验规则(rules)进行网络请求校验的方法,以及如何通过formRef引用表单对象并进行键盘按键监听,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • Vue.js -- 过滤器使用总结

    Vue.js -- 过滤器使用总结

    本篇文章主要介绍了Vue.js -- 过滤器使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • vuex 第三方包实现数据持久化的方法

    vuex 第三方包实现数据持久化的方法

    本文主要介绍了vuex 第三方包实现数据持久化的方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论