在react项目中使用fetch 和 JWT进行权限验证

JWT权限验证过程

1、未登录时进入登录页面、输入用户名密码、验证成功后返回token

2、将token储存在本地

3、每次请求带token、验证正确往下执行、验证错误删除本地token进入 登录页面重新登录

登录方法

login = ()=>{
        try {
            authLogin({
                username:this.state.username,
                password:this.state.password
            }).then((json)=>{
                if(json.status){
                    setItem("username",this.state.username);
                    setItem("token",json.token);
                    setItem("islogin",true);

                    this.setUserinfo(this.state.username);
                    this.isLogin();
                    // this.setToken(json.token);
                    this.props.history.push("/")
                }else{
                    alert("用户名密码错误请重新填写")
                }
            })
        }catch (e) {
            console.log(e);
        }

    };
复制代码

在验证成功后返回token，将token存入localStorage中在fetch每次请求中在header中加入token

封装fetch

export default function request(method, url, body) {
    method = method.toUpperCase();
    if (method === 'GET') {
        // fetch的GET不允许有body，参数只能放在url中
        body = undefined;
    } else {
        body = body && JSON.stringify(body);
    }
    return fetch(url, {
        method,
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Authorization': ('Bearer ' + localStorage.getItem('token')) || '' // 从localStorageStorage中获取access token
        },
        body
    }).then((res) => {
        if (res.status === 401) {
            history.replace('/login');
            return Promise.reject('Unauthorized.');
        }
        return res;
    })
}
复制代码

设置请求头Authorization，每次请求在localStorage中取出token返回的状态码为401则重定向到login登录页面

koa后台

const Koa = require('koa');
const app = new Koa();
const route = require('koa-route');
const cors = require('koa2-cors');
const orders = require("./order/orders");
const koaBody = require('koa-body');
const jwt = require('jsonwebtoken');
const koaJwt = require('koa-jwt')


//验证token失效或者过期
app.use((ctx, next) => {
    return next().catch((err) => {
        if (err.status === 401) {
            ctx.status = 401;
            ctx.body = {
                ok: false,
                msg: err.originalError ? err.originalError.message : err.message
            }
        } else {
            throw err;
        }
    });
});
//签名
const jwtSecret = "my_token";

//设置不需要验证的路由
app.use(koaJwt({secret: jwtSecret}).unless({
    path: [/^\/api\/login/]
}));

// 使用ctx.body解析中间件
app.use(koaBody());

//设置跨域
app.use(cors());

app.use(route.get("/api/orders", (ctx) => {
    //如果有token而且没有过期
    //在这里解析token
    ctx.body = orders;
}));

app.use(route.post("/api/login", (ctx) => {
    const {username, password} = ctx.request.body;
    if (username === "admin" && password === "123456") {
        const token = jwt.sign({
            name: username,
            _id: 1
        }, 'my_token');
        ctx.body = {
            mes: "success",
            status: true,
            token: token
        }

    } else {
        ctx.body = {
            mes: "fail",
            status: false,
        }
    }
}));

app.listen(8000);
复制代码