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);
仅供参考，有待工作中验证。
