token校验以及前后台代码实现

1、token定义

Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

2、基于 Token 的身份验证

使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。流程是这样的：

1. 客户端使用用户名跟密码请求登录
2. 服务端收到请求，去验证用户名与密码
3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
7. APP登录的时候发送加密的用户名和密码到服务器，服务器验证用户名和密码，如果成功，以某种方式比如随机生成32位的字符串作为token，存储到服务器中，并返回token到APP，以后APP请求时，凡是需要验证的地方都要带上该token，然后服务器端验证token，成功

3、前台代码实现逻辑

import React from 'react';
import {
   Form, Input, Icon, Button, Tabs, Modal} from 'antd';
import styles from './login.module.css';
import history from 'libs/history';
import {
   http, updatePermissions} from 'libs';
import logo from './logo-spug-txt.png';

class LoginIndex extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      loading: false,
      loginType: 'default'
    }
  }


  handleSubmit = (value) => {
   
    this.setState({
   loading: true});
    http.post('/api/account/login/', value)
    .then(data => {
   
      if (!data['has_real_ip']){
   
        Modal.warning({
   
          title: '安全警告',
          className: styles.tips,
          content: <div>
            未能获取到客户端的真实IP，无法提供基于请求来源IP的合法性验证，请注意！
          </div>,
          onOk: () => this.doLogin(data)
           })
        }else{
   
            this.doLogin(data)
        }
      }
      
    )
    .catch(function (error) {
   
      console.log(error);
    })
    this.setState({
   loading: false});
    };

  doLogin = (data) => {
   
    localStorage.setItem('token', data['access_token']);
    localStorage.setItem('is_supper', data['is_supper']);
    localStorage.setItem('permissions', JSON.stringify(data['permissions']));
    localStorage.setItem('host_perms', JSON.stringify(data['host_perms']));
    updatePermissions(data['is_supper'], data['host_perms'], data['permissions']);
    if (history.location.state && history.location.state['from']) {
   
      history.push(history.location.state['from'])
    } else {
   
      history.push('/welcome/index')
    }
  };

  render() {
   
    return (
      <div className={
   styles.container}>
        <div className={
   styles.titleContainer}>
          <div><img className={
   styles.logo} src={
   logo} alt="logo"/></div>
          <div className={
   styles.desc}>网络设备管理运维平台</div>
        </div>
        <div className={
   styles.formContainer}>
          <Form onFinish={
   this.handleSubmit} >
            <Form.Item className=