react 获取token
发布时间:2020-12-15 20:35:15 所属栏目:百科 来源:网络整理
导读: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); //储存to
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.效果显示 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Postgresql用户密码过期的解决(一)
- flex AdvancedDataGrid表格联动
- cocos2dx 3.x 自学笔记 <二> cocos2dx 中注册触摸事件touc
- Cocos2d-x v3.2笔记――总结Cocos2d-x 3.x版本的一些变化
- IP计算_hdu_2206
- Flex 的一些初始化事件initialize,creationComplete,applic
- ruby-on-rails – 将提交按钮图像添加到Rails表单
- Ajax.Request()笔记
- Cocos2D iOS之旅:如何写一个敲地鼠游戏(六):放置地鼠
- xcode – [IOS SDK] – touchesBegan与特定对象?