一步一步搭建react應用-使用 jwt + redis 來做基于token的用戶身份認證

Scholer 發布于2019-06-26 17:22 / 2993人閱讀

摘要：一步一步構建一個應用開篇地址基于的認證流程客戶端用戶發登錄請求服務端驗證用戶名密碼驗證成功服務端生成一個，響應給客戶端客戶端之后的每次請求中都帶上這個服務端對需要認證的接口要驗證，驗證成功接收請求這里我們采用來生成，使用驗證驗證成功會把

[一步一步構建一個react應用-開篇](https://segmentfault.com/a/11...

git地址

基于token的認證流程

客戶端用戶發登錄請求

服務端驗證用戶名密碼

驗證成功服務端生成一個token，響應給客戶端

客戶端之后的每次請求header中都帶上這個token

服務端對需要認證的接口要驗證token，驗證成功接收請求

這里我們采用jsonwebtoken來生成token，

jwt.sign(payload, secretOrPrivateKey, [options, callback])

使用express-jwt驗證token（驗證成功會把token信息放在request.user中）

express_jwt({
        secret: SECRET,
        getToken: (req)=> {
        if (req.headers.authorization && req.headers.authorization.split(" ")[0] === "Bearer") {
            return req.headers.authorization.split(" ")[1];
        } else if (req.query && req.query.token) {
            return req.query.token;
        }
        return null;
    }
    }

為什么使用redis

采用jsonwebtoken生成token時可以指定token的有效期，并且jsonwebtoken的verify方法也提供了選項來更新token的有效期，但這里使用了express_jwt中間件，express_jwt不提供方法來刷新token

思路：

客戶端請求登錄成功，生成token

將此token保存在redis中，設置redis的有效期（例如1h）

新的請求過來，先express_jwt驗證token，驗證成功，再驗證token是否在redis中存在，存在說明有效

有效期內客戶端新的請求過來，提取token,更新此token在redis中的有效期

客戶端退出登錄請求，刪除redis中此token

const express_jwt = require("express-jwt")
const redis = require("./redis")
const jwt = require("jsonwebtoken")
const unless = require("express-unless")
const SECRET = "MOVIESKEY"

const token = {

    SECRET,
    sign: (user) => {
        return jwt.sign(user, SECRET)
    },
    getToken: function fromHeaderOrQuerystring(req) {
        if (req.headers.authorization && req.headers.authorization.split(" ")[0] === "Bearer") {
            return req.headers.authorization.split(" ")[1];
        } else if (req.query && req.query.token) {
            return req.query.token;
        }
        return null;
    },
    validToken: express_jwt({
        secret: SECRET,
        getToken: this.getToken
    }),
    noAuthorization: (err, req, res, next) => {
        if (err.status == 401) {
            res.json(err)
            return
        }
        next()
    },
    //token在redis中存在，更新有效期，不存在說明已退出登錄
    checkRedis: (req, res, next) => {
        const tok = token.getToken(req)
        redis.get(tok, (data) => {
            if (data) {
                // token 在redis中存在，延長過期時間
                redis.updateExpire(tok)
                next()
            } else {
                next(10005)
            }
        })
    },
    add:(tok)=>{
        redis.add(tok)
    },
    remove: (req) => {
        const tok = token.getToken(req)
        tok && redis.remove(tok)
    }
}
token.checkRedis.unless = unless

module.exports = token

使用

routes/movies.js

const unlessPath = {
  path: [
    { url: "/api/movies", methods: ["GET"] },
    { url: "/api/movies/search/by", methods: ["GET"] },
    { url: /movies/[^/]+$/, methods: ["GET"] },
  ]
}

if (process.env.NODE_ENV != "test") {
  router.use(
    token.validToken.unless(unlessPath),
    token.noAuthorization,
    token.checkRedis.unless(unlessPath)
  )
}

router.get("/",(req,res,next)=>{})
router.post("/",(req,res,next)=>{})
router.put("/:movieId",(req,res,next)=>{})

云服務器 GPU云服務器一步一步寫java 走一步進一步進一步增強

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19090.html

一步一步搭建react應用-使用 jwt + redis 來做基于token的用戶身份認證

摘要：一步一步構建一個應用開篇地址基于的認證流程客戶端用戶發登錄請求服務端驗證用戶名密碼驗證成功服務端生成一個，響應給客戶端客戶端之后的每次請求中都帶上這個服務端對需要認證的接口要驗證，驗證成功接收請求這里我們采用來生成，使用驗證驗證成功會把 [一步一步構建一個react應用-開篇](https://segmentfault.com/a/11... git地址基于token的認證流程客...

ivyzhang 2019-08-21 16:22 評論0 收藏0
一步一步構建一個react應用-開篇

摘要：線上地址主要從下面幾點入手一步一步搭建應用前后端初始化爬取豆瓣電影的電影信息開啟身份認證使用來做基于的用戶身份認證中使用來寫單元測試部署技術棧沒用之后改運行代碼到本地項目地址喜歡就一下吧前端后端需要安裝本項目端口并開啟權限認證。介紹斷斷續續利用周末時間做了兩個月，基于react和express的一個小項目差不多做完了。所以想寫一系列文章來總結一下前后端用到技術及遇到的問題和解決方法...

BigTomato 2019-08-20 19:09 評論0 收藏0
一步一步構建一個react應用-開篇

摘要：線上地址主要從下面幾點入手一步一步搭建應用前后端初始化爬取豆瓣電影的電影信息開啟身份認證使用來做基于的用戶身份認證中使用來寫單元測試部署技術棧沒用之后改運行代碼到本地項目地址喜歡就一下吧前端后端需要安裝本項目端口并開啟權限認證。介紹斷斷續續利用周末時間做了兩個月，基于react和express的一個小項目差不多做完了。所以想寫一系列文章來總結一下前后端用到技術及遇到的問題和解決方法...

lylwyy2016 2019-06-26 17:23 評論0 收藏0
2017-09-10 前端日報

摘要：前端日報精選如何制作離線友好的表單淺談前端狀態管理年學習的一些建議我遇到的前端面試題并發模型與中文和的比較介紹掘金使用實踐一步一步搭建應用使用來做基于的用戶身份認證個人文章下劃線是否破壞可讀性從看的掘金從零開始教你寫一個包前 2017-09-10 前端日報精選如何制作離線友好的表單？淺談前端狀態管理2017 年學習 React + Redux 的一些建議我遇到的前端面試題2017J...

elva 2019-08-21 16:23 評論0 收藏0
react技術棧實踐(從前到后擼一個電影搜集應用)

摘要：其實，該復雜的東西在哪放都復雜，只不過現在更清晰一點使用不好的地方就是太繁瑣了，定義各種各種組件。。。。。之前做了個好電影搜集的小應用，前端采用react，后端采用express+mongodb，最近又將組件間的狀態管理改成了redux，并加入了redux-saga來管理異步操作,記錄一些總結在線地址手機模式源碼主要功能爬取豆瓣電影信息并錄入MongoDB 電影列表展示...

tigerZH 2019-08-22 11:21 評論0 收藏0