快捷導(dǎo)航

express框架中使用jwt實(shí)現(xiàn)驗(yàn)證的方法

更新時(shí)間：2019年08月25日 16:07:30 作者：飛機(jī)

這篇文章主要給大家介紹了關(guān)于express框架中使用jwt實(shí)現(xiàn)驗(yàn)證的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用express具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

接著上遍文章(使用session保存用戶數(shù)據(jù))來讓使用jwt保存用戶數(shù)據(jù)。

這里會(huì)用到passport-jwt/jsonwebtoken。

passport-jwt是passport的一個(gè)驗(yàn)證策略。它使用jwt（json web token）驗(yàn)證。

jsonwebtoken是一個(gè)編碼、解碼、驗(yàn)證jwt的模塊。

使用jwt保存用戶數(shù)據(jù)與使用session保存用戶數(shù)據(jù)對(duì)比

session	json web token
保存在server	保存在client

因session保存在server，所以服務(wù)器壓力比較大。聽說并發(fā)量達(dá)到1k時(shí)就能看到效果。

因jwt保存在client，所以需要加密。

使用jwt

1. 安裝依賴。

npm i passport-jwt jsonwebtoken

2. 創(chuàng)建一個(gè)配置文件，引用配置是使用。

// ./config.js
module.exports = {
 secretKey: '12345-67890-9876-54321',
 mongoUrl: 'mongodb://localhost:27017/confusion'
}

3. 使用數(shù)據(jù)庫鏈接配置

var config = require('./config')
...
const url = config.mongoUrl
const connet = mongoose.connect(url, {useNewUrlParse: true, useCreateIndex: true})

4. 創(chuàng)建驗(yàn)證文件

./authenticate.js
var passport = require('passport'),
 LocalStrategy = require('passport-local').Strategy,
 User = require('./models/user')

var JwtStrategy = require('passport-jwt').Strategy,
 ExtractJwt = require('passport-jwt').ExtractJwt,
 jwt = require('jsonwebtoken')

var config = require('./config.js')

passport.use(new LocalStrategy(User.authenticate()))
passport.serializeUser(User.serializeUser())
passport.deserializeUser(User.deserializeUser())

exports.getToken = function (user) {
 return jwt.sign(user, config.secretKey, {expiresIn: 3600}) // 簽發(fā)token時(shí)設(shè)置超時(shí)時(shí)間是3600s
}

var opts = {}
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken() // 從驗(yàn)證頭中提取，模型默認(rèn)是`'bearer'`.
opts.secretOrKey = config.secretKey

exports.jwtPassport = passport.use(new JwtStrategy(opts, (jwt_payload, done) => {
 console.log('JWT payload: ', jwt_payload)
 User.findOne({_id: jwt_payload._id}, (err, user) => {
 if (err) {
 return done(err, false)
 } else {
 if (user) {
 return done(null, user)
 } else {
 return done(null, false)
 }
 }
 })
}))

exports.verifyUser = passport.authenticate('jwt', {session: false}) // 使用jwt就不再需要session保存用戶數(shù)據(jù)了。

5. 用戶申請(qǐng)登錄時(shí)把jwt給前端

// routes/users.js
...
var authenticate = require('../authticate')
router.post('/login', passport.authenticate('local'), (req, res) => { // 登錄時(shí)還是使用passport-local
 var token = authenticate.getToken({_id: req.user._id}) // 得到簽發(fā)后的jwt
 res.statusCode = 200
 res.setHeader('Content-Type', 'application/json')
 res.json({success: true, token: token, status: 'You are successful logged in!'})
})

6. 前端保存token

// use localStorage
$.ajax({
 type: 'post',
 dataType: 'json',
 url: 'users/login',
 data: {
 username: 'un',
 password: 'pw'
 },
 success: funciton (res) {
 localStorage.token = getToken(res)
 },
 error: funciton (err) {...}
})
// 還可以使用vux方法。
// 還可以使用封裝axios方法。

7. 用戶登錄超時(shí)
jsonwebtoken驗(yàn)證jwt后，若結(jié)果不通過，會(huì)有3種錯(cuò)誤類型。分別是

TokenExpiredError // 當(dāng)token超時(shí)時(shí)拋出。

err = {
 name: 'TokenExpiredError',
 massage: 'jwt expired',
 expired: [ExpDate]
}
JsonWebTokenError

jwt錯(cuò)誤

err = {
 name: 'JsonWebTokenError',
 message: 'jwt malformed' // 'jwt malformed', 'jwt signature in required', 'invalid signature', 'jwt audience invalid. expected: [OPTIONS AUDIENCE]', 'jwt issuer invalid. expected: [OPTIONS ISSUER]', 'jwt id invalid. expected:[OPTIONS JWT ID]', 'jwt subject invalid. expected: [OPTIONS SUBJECT]'
}

NotBeforeError

當(dāng)當(dāng)前時(shí)間超過nbf的值時(shí)拋出該錯(cuò)誤。

err = {
 name: 'NotBeforeError',
 message: 'jwt not active',
 date: 2018-10-04T16:10:44.000Z
}

passport在驗(yàn)證jwt不通過時(shí)(token過期也是一種不通過)自動(dòng)向前端發(fā)送“狀態(tài)碼為401，內(nèi)容是Unauthorized”.
在使用passport/passport-jwt/jsonwebtoken時(shí)沒有發(fā)現(xiàn)處理token過期的方法。所以在使用passport-jwt驗(yàn)證不通過時(shí)再寫一個(gè)驗(yàn)證是否過期的方法。

// authenicate.js
...
export.verifyUser = passport.authenticate('jwt', {
 session: false,
 failureRedirect: '/error/auth' // 在這個(gè)路由里統(tǒng)一處理驗(yàn)證不通過的事情
 })

// routes/error.js
...
router.get('/auth', (req, res, next) => {
 let header = req.headers
 let rawToken = header.authorization
 if (!rawToken.split(' ').length) {
 res.json({ // 統(tǒng)一的數(shù)據(jù)結(jié)構(gòu)方便前端使用
 code: 403,
 data: {},
 message: 'error for get token'
 })
 } else {
 let token = rawToken.split(' ')[1]
 jwt.verify(token, config.secretKey, err => { // 這里用到j(luò)sonwebtoken/config。注意引用
 switch (err.name) {
 case 'TokenExpiredError':
 case 'NotBeforeError':
  let payload = jwt.decode(token)
  token = authenticate.getToken({_id: payload._id})
  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.json({success: true, token: token, status: '已經(jīng)刷新token'})
  break
 case 'JsonWebTokenError':
 default:
  res.statusCode = 401
  res.json({
  code: 401,
  data: {
  error: err
  },
  message: 'token錯(cuò)誤'
  })
  break
 }
 })
 }
 })

8. 用戶jwt驗(yàn)證不通過

passport在驗(yàn)證jwt不通過時(shí)(token過期也是一種不通過)自動(dòng)向前端發(fā)送“狀態(tài)碼為401，內(nèi)容是Unauthorized”.

9. 用戶申請(qǐng)登出

在前端刪除token.

10. 不要打斷活動(dòng)用戶的操作

在no.7里若因?yàn)閠oken過期造成驗(yàn)證不通過，則向前端返回了新的token。不是在不影響用戶操作前提下更新用戶的token的。下面在的總結(jié)的幾種不影響用戶操作的前提下更新用戶的token的方法。

前端設(shè)置一個(gè)定時(shí)器。在小于過期時(shí)間時(shí)向后端請(qǐng)求新token并保存起來。
把token放在cookie時(shí)。后端從cookie里取出token，在過期前更新token。
將 token 存入 DB（如 Redis）中，失效則刪除；但增加了一個(gè)每次校驗(yàn)時(shí)候都要先從 DB 中查詢 token 是否存在的步驟，而且違背了 JWT 的無狀態(tài)原則（這不就和 session 一樣了么？）。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: