import * as React from 'react' import * as ReactDom from 'react-dom' import {Link, browserHistory} from 'react-router'; import * as axios from 'axios'; export default class Login extends React.Component<any,any>{ constructor(props){ super(props) this.state = { userName : '', password : '', yzNoId : '', hash : Math.random() } } public async sbumit(params : any) : Promise<any>{ let res = await axios.post('http://localhost:3000/login',params); if(res.data.verson){ sessionStorage.setItem('token',res.data.token); browserHistory.push("/home") } } handleUserName(e) : any { this.setState({ userName : e.target.value }) } handlePassword(e) : any { this.setState({ password : e.target.value }) } handleYzId(e) : any { this.setState({ yzNoId : e.target.value }) } setHash() { this.setState({ hash : Math.random() }) } render(){ const { userName, password, yzNoId } = this.state; return( <div> <div className="nav-wrap"> <ul className="nav"> <li><Link to="/home">首页</Link></li> <li><Link to="/imgLoad">上传</Link></li> <li><Link to="/login">登陆</Link></li> </ul> </div> <div className="content"> <div className="login-warp"> <p> <input type="text" className="username" value=https://www.jb51.net/article/{userName} onChange=https://www.jb51.net/article/{this.handleUserName.bind(this)} placeholder="用户名"/> </p> <p> <input type="text" className="password" value=https://www.jb51.net/article/{password} onChange=https://www.jb51.net/article/{this.handlePassword.bind(this)} placeholder="密码"/> </p> <p> <input type="text" className="yz" value=https://www.jb51.net/article/{yzNoId} onChange=https://www.jb51.net/article/{this.handleYzId.bind(this)} placeholder="验证码"/> <img src=https://www.jb51.net/article/{"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick=https://www.jb51.net/article/{this.setHash.bind(this)} /> </p> <p> <input type="button" className="submit" value="登陆" onClick=https://www.jb51.net/article/{this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> </p> </div> </div> </div> ) } }
在sbumit方法里我们将token放到了sessonstorage里面。
第三步：设置中间件每次请求接口时，验证token,如果解析成功加入到请求头里面。
./middleware/token.js
var jwt = require('jsonwebtoken'); class Tokens { constructor(){} testToken(req,res,next) { var token = req.body.token || req.query.token || req.headers['x-access-token']; if(token) { //存在token，解析token jwt.verify(token, 'cxh' , function(err,decoded) { if(err) { // 解析失败直接返回失败警告 return res.json({success:false,msg:'token错误'}) }else { //解析成功加入请求信息，继续调用后面方法 req.userInfo = decoded; next() } }) }else { return res.status(403).send({success:false,msg:"没有token"}) } } setToken(name,time,data) { var jwtSecret = name; var token = jwt.sign(data, jwtSecret, { expiresIn: time }) return token; } } module.exports = Tokens
testToken方法是验证token，setToken是设置token方法
假如没有登录请求是这样的
在 router/index.js
var express = require('express'); var router = express.Router(); var rf = require('fs'); var Login = require('./controller/login'); var Tokens = require('./middleware/token') var t = new Tokens; var login = new Login; //主页 router.get('https://www.jb51.net/', function(req, res, next) { res.render("wap/index") }); //获取图片验证码 router.get('/captcha', login.captcha); //登录验证 router.post('/login',login.loginer); //请求数据时 t.testToken 验证token router.post('/list',t.testToken,function(req, res, next){ res.json({ //在请求信息里面拿到数据 username : req.userInfo.userName, success : true, result : [ { name:'1111111' }, { name :'22222' } ] }) }) module.exports = router;
我们在另一个页面调用list接口试一下