zoukankan      html  css  js  c++  java
  • react 获取token

    1.在action  中发送请求,j将获取得到的token  储存起来 到localhost

    //登陆发送请求
    export  const  loginUser = (userData,history)=>dispatch=>{
        
          axios.post("/api/user/login",userData)
          .then(res=>{
                const  { token }=res.data;
                console.log(token);
                //储存token到local
                localStorage.setItem("jwtToken",token);
                //设置axios  的header
                setAuthToken(token);
          })
          .catch(err=>{
                dispatch({
                    type:GET_ERRORS,
                    payload:err.response.data
                }) 
          })
    }
    

      2.登陆主页面中将action  与  登陆组件连接起来

    import React, { Component } from 'react'
    import {loginUser} from '../../actions/authActions'
    import {connect} from 'react-redux'
    import {withRouter} from 'react-router-dom'
     class Login extends Component {
      constructor() {
        super();
        this.state = {
          email: '',
          password: '',
          errors: {}
        };
    
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
      }
    
      onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
      }
      onSubmit(e) {
        e.preventDefault();
        const newUser = {
          email: this.state.email,
          password: this.state.password
        };
        // console.log(newUser);
        this.props.loginUser(newUser)
      }
      render() {
        return (
          <div className="login">
          <div className="container">
            <div className="row">
              <div className="col-md-8 m-auto">
                <h1 className="display-4 text-center">登录</h1>
                <p className="lead text-center">使用已有的账户登录</p>
                <form onSubmit={this.onSubmit}>
                <div  className="form-group">
                      <input
                        type="email"
                        className="form-control  form-control-lg"
                        placeholder="邮箱地址"
                        name="email"
                        value={this.state.email}
                        onChange={this.onChange}
                      />
                 </div>
                 <div  className="form-group">
                        <input
                          type="password"
                          className="form-control  form-control-lg"
                          placeholder="密码"
                          name="password"
                          value={this.state.password}
                          onChange={this.onChange}
                        
                        />
                  </div>
                  <input type="submit" className="btn btn-info btn-block mt-4" />
                </form>
              </div>
            </div>
          </div>
        </div>
        )
      }
    }
    //connect  将两个组件连接起来
    export default connect(null,{loginUser})(withRouter(Login))
    

      3.设置axios 的header

    import axios from 'axios';
    
    const setAuthToken = token => {
      if (token) {
        // headers 每个请求都需要用到的
        axios.defaults.headers.common["Authorization"] = token;
      } else {
        delete axios.defaults.headers.common["Authorization"];
      }
    }
    
    export default setAuthToken;
    

      4.效果显示

  • 相关阅读:
    JavaScript中的map()函数
    JS中去除字符串空白符
    JS中的reduce函数
    Javascript中中括号的几种形式
    Jquery点击加载更多
    百度编辑器的调用
    Newtonsoft.json 二次引用出错解决办法
    WebConfig配置文件
    jqGrid首次加载时不加载任何数据
    jqGrid列的统计
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/10331621.html
Copyright © 2011-2022 走看看