一步一步搭建react应用-使用 jwt + redis 来做基于token的用户身份认证

ivyzhang 发布于2019-08-21 16:22 / 3511人阅读

摘要：一步一步构建一个应用开篇地址基于的认证流程客户端用户发登录请求服务端验证用户名密码验证成功服务端生成一个，响应给客户端客户端之后的每次请求中都带上这个服务端对需要认证的接口要验证，验证成功接收请求这里我们采用来生成，使用验证验证成功会把

[一步一步构建一个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)=>{})

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88464.html

一步一步搭建react应用-使用 jwt + redis 来做基于token的用户身份认证

摘要：一步一步构建一个应用开篇地址基于的认证流程客户端用户发登录请求服务端验证用户名密码验证成功服务端生成一个，响应给客户端客户端之后的每次请求中都带上这个服务端对需要认证的接口要验证，验证成功接收请求这里我们采用来生成，使用验证验证成功会把 [一步一步构建一个react应用-开篇](https://segmentfault.com/a/11... git地址基于token的认证流程客...

Scholer 2019-06-26 17: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