>  기사  >  웹 프론트엔드  >  node.js+captchapng+jsonwebtoken을 사용하여 로그인 확인을 완료하세요.

node.js+captchapng+jsonwebtoken을 사용하여 로그인 확인을 완료하세요.

巴扎黑
巴扎黑원래의
2017-08-18 10:34:302233검색

이 글에서는 로그인 인증을 구현하기 위한 node.js+captchapng+jsonwebtoken의 예를 주로 소개합니다. 관심 있는 분들은 이에 대해 알아볼 수 있습니다.

로그인 인증에 관해서라면 누구나 확실히 12306을 떠올릴 것입니다. 인증 코드. 12306은 티켓 사기를 방지하기 위해 많은 노력을 기울였고, 인증코드는 점점 식별하기 어려워졌고, 결국 인간조차 식별하지 못하게 될 수도 있습니다.

오늘 편집자는 노드에 이미지 인증 코드를 구현하는 방법과 토큰을 사용하여 로그인을 인증하는 방법을 알려줄 것입니다. 이 글을 공부하고 나면 다음 내용을 배울 수 있습니다.

1. captchapng를 사용하여 이미지 확인 코드 생성

2. jsonwebtoken을 사용하여 로그인 확인 구현

1. 이미지 확인 코드 생성(모든 코드는 끝에 있음)

우선, 다음은 프로세스를 이해합니다. 첫 번째 단계는 서버가 4자리 숫자 집합을 무작위로 생성하는 것입니다.

두 번째 단계는 이 네 자리 숫자를 캔버스에 그려 그림을 생성하는 것입니다.

세 번째 단계는 사용자가 데이터를 반환할 때 비교할 수 있도록 이 4자리 숫자를 저장하는 것입니다.

그럼 어디에 저장할까요? 물론 사용자를 구별하기 위해서는 세션에 저장해 두는 것이 가장 안전하다.

첫 번째 단계는 로그인 페이지를 만드는 것입니다. 여기서는 여전히 React를 사용합니다.

login.tsx


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 : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  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
    })
  }
  render(){
    const { userName, password, yzNoId } = this.state;
    return(
      <p>
        <p 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>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha"} className="yz-img" />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

페이지는 다음과 같습니다


서버를 통해 인증 사진을 제공해야 합니다.

router/index.js 다음 코드를 추가합니다.


var Login = require(&#39;./controller/login&#39;);
var login = new Login;
router.get(&#39;/captcha&#39;, login.captcha);
router.post(&#39;/login&#39;,login.loginer);
login是定义在控制器的一个类的实例,captcha,loginer是它的方法。分别是返回验证图片、登录验证。
controller/login.js

var rf = require(&#39;fs&#39;);
var captchapng = require(&#39;captchapng&#39;);
class Login {
  constructor(){}
  captcha(req, res, next) {
    var str = parseInt(Math.random()*9000+1000);  //随机生成数字
    req.session.captcha = str;  // 存入session
    var p = new captchapng(80, 30, str); //生成图片
    p.color(0, 0, 0, 0);
    p.color(80, 80, 80, 255);
    var img = p.getBase64();
    var imgbase64 = new Buffer(img, &#39;base64&#39;);
    res.writeHead(200, {
      &#39;Content-Type&#39;: &#39;image/png&#39;
    });
    res.end(imgbase64);
  }
  loginer(req, res, next) {
    let captcha = req.body.captcha;
    let userName = req.body.userName;
    let password = req.body.password;
    if (captcha != req.session.captcha) {
      res.status(400).send({
        message: &#39;验证码错误&#39;
      });
    }else if(userName == "chenxuehui" && password == "123321"){
      res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
    }else{
      res.json({"code":0,"verson":false,"msg":"密码错误"});
    }
  }
}
module.exports = Login

보안문자 방식은 4자리 숫자가 포함된 그림을 생성한 후 해당 그림을 세션에 저장하는 것입니다.

router/index.js


router.get(&#39;/captcha&#39;, login.captcha);

에서 이 메서드를 참조하세요. 즉, localhost:3000/captcha를 방문하면 사진이 반환됩니다.

이렇게 연결하면 이미지의 src 속성을 통해 이미지를 얻을 수 있는데, 이미지를 클릭하면 새로고침을 해야 하므로 이미지에 클릭 새로고침 이벤트를 추가해야 합니다. login.tsx에 다음 코드를 삽입하세요


setHash() {
    this.setState({
      hash : Math.random()
    })
}

img 태그도

코드를 복사하세요 코드는 다음과 같습니다.


afd6e977ec829464f8ce64b9bb58f556


현재 login.tsx의 모든 코드 :


import * as React from &#39;react&#39;
import * as ReactDom from &#39;react-dom&#39;
import {Link, browserHistory} from &#39;react-router&#39;;
import * as axios from &#39;axios&#39;;
export default class Login extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      userName : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  public async sbumit(params : any) : Promise<any>{
    let res = await axios.post(&#39;http://localhost:3000/login&#39;,params);
  }
  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(
      <p>
        <p 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>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

이렇게 img를 클릭하면 무작위로 해시가 생성되고, 그 후 새로운 이미지가 호출됩니다.

그럼 로그인 인증을 진행하겠습니다.

로그인 인증은 로그인 방법을 사용합니다.

비교를 위해 사용자의 사용자 이름 정보, 비밀번호 및 인증 코드를 가져오고 마지막으로 로그인 성공 여부에 대한 데이터를 반환합니다.

사용자가 성공적으로 로그인한 후에는 다음 번에 다시 로그인할 필요가 없습니다. 과거에는 세션이나 쿠키를 선택할 수 있었습니다. 이제 프런트엔드와 백엔드를 별도로 개발했기 때문에 단일 페이지를 구축하고 Ajax를 사용하여 애플리케이션을 구축하는 경향이 더 커졌습니다. 토큰은 이 개발 모델에 가장 적합합니다.

토큰 로그인 확인

토큰은 암호화된 문자열입니다. 로그인에 성공하면 저장을 위해 사용자에게 반환됩니다. 그런 다음 사용자는 인터페이스를 요청할 때 이 토큰을 가져옵니다. 그래서 우리는 토큰을 암호화해야 합니다.

Json Web Token은 이 문제를 해결하기 위해 특별히 설계되었습니다. 원리는 자세히 설명하지 않겠습니다. 실제로는 특정 방식으로 문자열을 얻은 다음 특정 방식으로 풀어내는 것입니다.

우리가 해야 할 첫 번째 단계는

사용자가 성공적으로 로그인하면 토큰을 생성하여 사용자에게 반환하는 것입니다.

2단계: 사용자는 토큰을 얻은 후 토큰을 로컬에 저장해야 합니다.

3단계: 중간 레이어를 작성해야 합니다. 사용자가 요청할 때마다 사용자가 소지한 토큰이 올바른지 확인합니다. 데이터는 올바르게 반환되었지만 경고는 잘못 반환되었습니다.
사용자는 데이터를 요청할 때마다 헤더에 토큰을 가져와야 합니다.

1단계: 여전히 Controller/login.js


var rf = require(&#39;fs&#39;);
var jwt = require(&#39;jsonwebtoken&#39;);
var captchapng = require(&#39;captchapng&#39;);
var Tokens = require(&#39;../middleware/token&#39;)
var t = new Tokens;
class Login {
  constructor(){}
  captcha(req, res, next) {
    var str = parseInt(Math.random()*9000+1000);  //随机生成数字
    req.session.captcha = str;  // 存入session
    var p = new captchapng(80, 30, str); //生成图片
    p.color(0, 0, 0, 0);
    p.color(80, 80, 80, 255);
    var img = p.getBase64();
    var imgbase64 = new Buffer(img, &#39;base64&#39;);
    res.writeHead(200, {
      &#39;Content-Type&#39;: &#39;image/png&#39;
    });
    res.end(imgbase64);
  }
  loginer(req, res, next) {
    let captcha = req.body.captcha;
    let userName = req.body.userName;
    let password = req.body.password;
    if (captcha != req.session.captcha) {
      res.status(400).send({
        message: &#39;验证码错误&#39;
      });
    }else if(userName == "chenxuehui" && password == "123321"){
      // 设置token
      var datas = {userName:"chenxuehui"}
        //调用../middleware/token 下方法设置
      var token = t.setToken(&#39;cxh&#39;,300,datas)
      res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
    }else{
      res.json({"code":0,"verson":false,"msg":"密码错误"});
    }
  }
}

module.exports = Login

이번에는 로그인 메소드에 설정 토큰을 추가하고 이를 사용자에게 반환합니다. setToken 메소드는 토큰을 설정하는 메소드입니다.

2단계: 사용자가 받은 후 저장합니다.

login.tsx에서는 다음과 같습니다


import * as React from &#39;react&#39;
import * as ReactDom from &#39;react-dom&#39;
import {Link, browserHistory} from &#39;react-router&#39;;
import * as axios from &#39;axios&#39;;
export default class Login extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      userName : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  public async sbumit(params : any) : Promise<any>{
    let res = await axios.post(&#39;http://localhost:3000/login&#39;,params);
    if(res.data.verson){
      sessionStorage.setItem(&#39;token&#39;,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(
      <p>
        <p 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>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

sbumit 방식에서는 토큰을 sessonstorage에 넣습니다.

3단계: 인터페이스가 요청될 때마다 토큰을 확인하도록 미들웨어를 설정합니다. 구문 분석에 성공하면 요청 헤더에 추가됩니다.

./middleware/token.js


var jwt = require(&#39;jsonwebtoken&#39;);
class Tokens {
  constructor(){}
  testToken(req,res,next) {
    var token = req.body.token || req.query.token || req.headers[&#39;x-access-token&#39;];
       
    if(token) {
            //存在token,解析token
      jwt.verify(token, &#39;cxh&#39; , function(err,decoded) {
        if(err) {
                   // 解析失败直接返回失败警告
          return res.json({success:false,msg:&#39;token错误&#39;})
        }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 방식은 토큰 검증, setToken 방식은 토큰 방식 설정

로그인 요청이 없을 경우 이런 모습


在 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('/', function(req, res, next) {
  res.render("wap/index")
});
//获取图片验证码
router.get(&#39;/captcha&#39;, 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接口试一下


import * as axios from &#39;axios&#39;;
import { transToken } from &#39;../decorator/index&#39;


class Home extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      data : &#39;&#39;
    }
  }
  async getList(): Promise<any>{
    let token = sessionStorage.getItem(&#39;token&#39;);
    const config = {
     // 请求头信息
     headers: {&#39;x-access-token&#39;: token}      
    }
    let res = await axios.post(&#39;http://localhost:3000/list&#39;,{},config);
    if(!res.data.success){
      browserHistory.push(&#39;/login&#39;);
      return;
    }
    this.setState({
      data : res.data
    })
  }
  render(){
    const { data } = this.state;
    return(
      <p>
        <p 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>
        </p>
        <p className="content">
          Home
          <span onClick={this.getList.bind(this)}>获取数据</span>
          <p>{
            data ? data.result.map( (val,k) => {
              return <li key = {k}>{val.name}</li>
            }) : null
          }</p>
        </p>
      </p>
      
    )
  }
}
export default Home

当调用getList时,如果此时没有登录res.data.success就会为false,则跳到登录页。

全部代码

node.js

app.js


var express = require(&#39;express&#39;);
var path = require(&#39;path&#39;);
var favicon = require(&#39;serve-favicon&#39;);
var logger = require(&#39;morgan&#39;);
var cookieParser = require(&#39;cookie-parser&#39;);
var bodyParser = require(&#39;body-parser&#39;);
var session = require("express-session");
var ejs = require(&#39;ejs&#39;);

var index = require(&#39;./routes/index&#39;);


var app = express();

// view engine setup
app.set(&#39;views&#39;, path.join(__dirname, &#39;views&#39;));
// app.set(&#39;view engine&#39;, &#39;jade&#39;);
app.engine(&#39;html&#39;, ejs.__express);
app.set(&#39;view engine&#39;, &#39;html&#39;);
app.use(session({
  secret:"dabao",
  resave:false,
  saveUninitialized:true,
  cookie:{}
}));
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, &#39;public&#39;, &#39;favicon.ico&#39;)));
app.use(logger(&#39;dev&#39;));
app.use(bodyParser.json());
app.use(bodyParser({limit: 5000000}));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, &#39;&#39;)));

app.use(&#39;/&#39;, index);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
 var err = new Error(&#39;Not Found&#39;);
 err.status = 404;
 next(err);
});

// error handler
app.use(function(err, req, res, next) {
 // set locals, only providing error in development
 res.locals.message = err.message;
 res.locals.error = req.app.get(&#39;env&#39;) === &#39;development&#39; ? err : {};

 // render the error page
 res.status(err.status || 500);
 res.render(&#39;error&#39;);
});

module.exports = app;

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;
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render("wap/index")
});
router.post('/upLoadImg',function(req,res,next){
  let imgData = req.body.imgData;
  console.log(imgData)
  let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
  let dataBuffer = new Buffer(base64Data, 'base64');
  let timer = Number( new Date() );
  console.log(timer)
  rf.writeFile("views/images/artCover"+timer+".png",dataBuffer, function(err) {
    if(err) {
     res.json({"code":400,"verson":false,"msg":err});
    }else {
     res.json({"code":100,"verson":true,"url":"views/src/common/images/artCover/"+timer+".png"});
    }
  });
})
router.get(&#39;/captcha&#39;, login.captcha);
router.post('/login',login.loginer);
router.post('/list',t.testToken,function(req, res, next){
  // 先解析token 
  console.log(req.userInfo)
  res.json({
    username : req.userInfo.userName,
    success : true,
    result : [
      {
        name:'1111111'
      },
      {
        name :'22222'
      }
    ]
  })
})
module.exports = router;

controller/login.js


var rf = require(&#39;fs&#39;);
var jwt = require(&#39;jsonwebtoken&#39;);
var captchapng = require(&#39;captchapng&#39;);
var Tokens = require(&#39;../middleware/token&#39;)
var t = new Tokens;
class Login {
  constructor(){}
  captcha(req, res, next) {
    var str = parseInt(Math.random()*9000+1000);  //随机生成数字
    req.session.captcha = str;  // 存入session
    var p = new captchapng(80, 30, str); //生成图片
    p.color(0, 0, 0, 0);
    p.color(80, 80, 80, 255);
    var img = p.getBase64();
    var imgbase64 = new Buffer(img, &#39;base64&#39;);
    res.writeHead(200, {
      &#39;Content-Type&#39;: &#39;image/png&#39;
    });
    res.end(imgbase64);
  }
  loginer(req, res, next) {
    let captcha = req.body.captcha;
    let userName = req.body.userName;
    let password = req.body.password;
    if (captcha != req.session.captcha) {
      res.status(400).send({
        message: &#39;验证码错误&#39;
      });
    }else if(userName == "chenxuehui" && password == "123321"){
      // 设置token
      var datas = {userName:"chenxuehui"}
      var token = t.setToken(&#39;cxh&#39;,300,datas)
      res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
    }else{
      res.json({"code":0,"verson":false,"msg":"密码错误"});
    }
  }
}
module.exports = Login

middleware/token.js


var jwt = require(&#39;jsonwebtoken&#39;);

class Tokens {
  constructor(){}
  testToken(req,res,next) {
    var token = req.body.token || req.query.token || req.headers[&#39;x-access-token&#39;];

    if(token) {
      jwt.verify(token, &#39;cxh&#39; , function(err,decoded) {
        if(err) {
          return res.json({success:false,msg:&#39;token错误&#39;})
        }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

react部分

login.tsx


import * as React from &#39;react&#39;
import * as ReactDom from &#39;react-dom&#39;
import {Link, browserHistory} from &#39;react-router&#39;;
import * as axios from &#39;axios&#39;;
export default class Login extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      userName : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  public async sbumit(params : any) : Promise<any>{
    let res = await axios.post(&#39;http://localhost:3000/login&#39;,params);
    if(res.data.verson){
      sessionStorage.setItem(&#39;token&#39;,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(
      <p>
        <p 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>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

home.js 获取列表信息


import * as React from &#39;react&#39;
import * as ReactDom from &#39;react-dom&#39;
import {Link, browserHistory} from &#39;react-router&#39;;
import * as axios from &#39;axios&#39;;
class Home extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      data : &#39;&#39;
    }
  }
  async getList(): Promise<any>{
    let token = sessionStorage.getItem(&#39;token&#39;);
    const config = {
     // 请求头信息
     headers: {&#39;x-access-token&#39;: token}      
    }
    let res = await axios.post(&#39;http://localhost:3000/list&#39;,{},config);
    if(!res.data.success){
      browserHistory.push(&#39;/login&#39;);
      return;
    }
    this.setState({
      data : res.data
    })
  }
  render(){
    const { data } = this.state;
    return(
      <p>
        <p 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>
        </p>
        <p className="content">
          Home
          <span onClick={this.getList.bind(this)}>获取数据</span>
          <p>{
            data ? data.result.map( (val,k) => {
              return <li key = {k}>{val.name}</li>
            }) : null
          }</p>
        </p>
      </p>
      
    )
  }
}
export default Home

위 내용은 node.js+captchapng+jsonwebtoken을 사용하여 로그인 확인을 완료하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.