本文主要是介绍番茄闹钟三(登录注册页面),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一. axios 配置需求
- axios 文档
- 配置 axios
- 配置 appid 和 appsecret
- 配置 gwt 验证的 gwt token
二. 安装 axios
三. 配置 axios
import axios from 'axios'
const appID = "PzutokfofqknrEzTaJUBkmJA"
const appSecret = "GUxobVHJT88pGFeDLtBpyT3D"
const instance = axios.create({
baseURL: 'https://gp-server.hunger-valley.com/',
headers: {
't-app-id' : appID,
't-app-secret': appSecret
}
});
四. 配置拦截器
- interceptors 的作用是,比如发起请求的时候在参数上再加点东西。response 也是在 response 的时候先拿一点数据,然后再走到 axios,then 的那一步
// axios.ts
import axios from 'axios'
const appID = 'PzutokfofqknrEzTaJUBkmJA'
const appSecret = 'GUxobVHJT88pGFeDLtBpyT3D'
const instance = axios.create({
baseURL: 'https://gp-server.hunger-valley.com/',
headers: {
't-app-id': appID,
't-app-secret': appSecret
}
})
instance.interceptors.request.use(function (config) {
const xToken = localStorage.getItem('x-token')
if (xToken) {
config.headers['Authorization'] = `Bearer ${xToken}`
}
return config
}, function (error) {
console.error(error)
return Promise.reject(error)
})
instance.interceptors.response.use(function (response) {
if (response.headers['x-token']) {
localStorage.setItem('x-token', response.headers['x-token'])
}
return response
}, function (error) {
return Promise.reject(error)
})
export default instance
五. 登录注册页面初步制作
import * as React from 'react';
import { Input,Icon,Button } from 'antd';
import axios from '../../../src/config/axios'
interface ISignUpState { // 如果不声明会报Property 'account' does not exist on type 'Readonly<{}>'.的错误
account: string,
password: string,
passwordConformation: string
}
class SignUp extends React.Component<any,ISignUpState> { // 第一个参数声明prop的类型,第二个参数声明state的类型
constructor(props:any){
super(props)
this.state = {
account: '',
password: '',
passwordConformation: ''
}
}
onChangeAccount = (e:any) => {
this.setState({account: e.target.value})
}
onChangePassword = (e:any) => {
this.setState({password: e.target.value})
}
onChangePasswordConformation = (e:any) => {
this.setState({passwordConformation: e.target.value})
}
submit = async () => {
const { account,password,passwordConformation } = this.state;
try{
await axios.post('sign_up/user',{
account,
password_confirmation:passwordConformation,
password
})
console.log('成功')
}catch (e) {
throw new Error(e)
}
}
public render() {
const { account,password,passwordConformation } = this.state;
return (
<div className="SignUp">
<Input
placeholder="请输入你的用户名"
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
value = {account}
onChange={this.onChangeAccount}
/>
<Input.Password value={password} placeholder="请输入密码" onChange={this.onChangePassword}/>
<Input.Password value={passwordConformation} placeholder="请确认密码" onChange={this.onChangePasswordConformation}/>
<Button onClick={this.submit}>注册</Button>
</p>
</div>
)
}
}
export default SignUp
六. Link 跳转页面的用法
//import {Link} from 'react-router-dom'
<Link to="/login">登录</Link>
七. 注册页的页面样式
#SignUp{
max-width: 500px;
margin: auto;
padding: 50px 0;
>*{
margin: 10px 0;
}
>h1{
text-align: center;
}
>.loginButton{
width: 100%;
}
}
八. 登录页的页面样式
#SignUp{
max-width: 500px;
margin: auto;
padding: 50px 0;
>*{
margin: 10px 0;
}
>h1{
text-align: center;
}
>.loginButton{
width: 100%;
}
}
九. 将 onChangeAccount 和 onChangePassword 抽成一个
interface ILoginState {
account?: string,
password?: string
}
onChange = (key: keyof ILoginState,value:string) => {
this.setState({[key]:value})
}
十. 开始制作首页
到了首页检查用户登录信息,如果可以登录就直接登录,如果不能登录也就是token是过期的话,我们就跳转到登录页
// Index.ts
getMe = async () => {
try{
const response = await axios.get('me')
this.setState({user: response.data})
}catch (e) {
console.error('获取用户失败')
if(e.response.status === 401){
this.props.history.push('/login')
}
}
}
十一. 全局拦截,完成登出逻辑
// 服务器约定,凡是用户获取失败,返回状态都是401
instance.interceptors.response.use(function (response) {
if (response.headers['x-token']) {
localStorage.setItem('x-token', response.headers['x-token'])
}
return response
}, function (error) {
window.location.href='/login' // 页面会再次跳转,粗暴的方式
return Promise.reject(error)
})
// 通过react Router的方式,不会刷新
// 封装history.ts
import { createBrowserHistory } from 'history';
const history = createBrowserHistory()
export default history
// 解决app.tsx没监听到组件的变化问题
import history from './config/history'
class Component extends React.Component {
public render(){
return (
<Router history={history}>
<div>
<Route exact={true} path="/" component={Index}/>
<Route path="/login" component={Login} />
<Route path="/signUp" component={SignUp} />
</div>
</Router>
)
}
}
export default Component
这篇关于番茄闹钟三(登录注册页面)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!