在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);

仅供参考，有待工作中验证。