美文网首页一亩三分地
vue+node(express)做中间层开发五--token验

vue+node(express)做中间层开发五--token验

作者: 元素师 | 来源:发表于2021-01-04 15:45 被阅读0次

    基于token的鉴权机制 — JWT介绍 简单说是用户调登陆接口后服务端返回一个token,前端拿到token放在header里,每次请求的时候传输给服务端,服务端根据token验证,如果有效就继续,如果无效就立即返回。

    • 用jsonwebtoken生成token
    • 用express-jwt验证token是否失效
    • 用jsonwebtoken解析出token中的用户信息,比如id

    安装依赖
    npm install jsonwebtoken --save
    npm install express-jwt

    新增server/node_api/src/libs/token.js文件

    import jwt from 'jsonwebtoken'
    import config from '../config'
    const jwtSecret = process.env.NODE_ENV === 'production' ? config.tokenKey.prod : config.tokenKey.dev
    
    export const generateToken = (userName, userId) => {
      return new Promise((resolve, reject) => {
        const token = jwt.sign({userName,userId}, jwtSecret, {expiresIn: '24h'});
        resolve(token)
      })
    }
    
    export const getToken = (token) => {
      return new Promise((resolve, reject) => {
        if(!token) {
          reject({error: 'token是空的'})
        }else {
          console.log('token=',token)
          const info = jwt.verify(token.split(' ')[1], jwtSecret)
          console.log('info=',info)
          resolve(info) //解析返回的值
        }
      })
    }
    

    jwt.sign()传入需要解析的值,一般为userName,userId,expiresIn设置token的过期时间。
    打印内容如下:

    token= bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyTmFtZSI6ImFkbWluIiwidXNlcklkIjoxLCJpYXQiOjE2MDk3NDExNDEsImV4cCI6MTYwOTgyNzU0MX0.JsioftQnZxM5xkfTkAiUjmzW29XGbkx2_H69-xe-iYs
    info= { userName: 'admin', userId: 1, iat: 1609741141, exp: 1609827541 }
    

    在app.js中增加一个中间件验证token是否过期。

    app.use((req, res, next) => {
      const token = req.headers['authorization']
      if(token == undefined) {
        next()
      }else {
        getToken(token).then((data) => {
          res.data= data;
          next()
        }).catch((error) => {
          next()
        })
      }
    })
    app.use(expressJwt({
      secret:'Baohong123456',
      algorithms: ['HS256']
    }).unless({
      path: ['/users/login']
    }))
    app.use('/', indexRouter)
    app.use('/users', usersRouter)
    ...
    // 错误处理中间件
    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.status(401).send('token失效')
      }
      res.render('error')
    })
    

    编辑server/node_api/src/routes/users.js,当用户登录成功后生成token返回给用户。因为node没有直接查询数据库,而是调用java提供的登录接口,如果正常返回就判断是登陆成功了

    router.post('/login', (req, res, next) => {
      login({ user_name: 'admin', user_pwd: '666' }).then(result => {
        const { result: { data: { data: { user, token } } } } = { result }
        generateToken(user.userName,user.id).then(nodeToken => {
          res.send({
            token,
            user,
            nodeToken
          })
        })
      })
    })
    

    前端在成功调用登陆接口后拿到返回的token,可以存在localStorage里,每次发送请求的时候吧token放在请求头即可。src/libs/axios.js

    const token = localStorage.getItem('token')
    if(token){
      config.headers.authorization = 'Bearer '+token
    }
    

    参考node.js之express的token验证

    相关文章

      网友评论

        本文标题:vue+node(express)做中间层开发五--token验

        本文链接:https://www.haomeiwen.com/subject/bmrvoktx.html