文章目录
注册功能实现
-
在service/user.js中增加reg注册函数
import axios from "axios"; import store from "store"; import expire from "store/plugins/expire"; import { observable} from "mobx"; // 过期插件 store.addPlugin(expire) export default class UserService { @observable loggedin = false; //被观察者 // 登录函数 login (email,password) { console.log(email,password); axios.post("/api/users/login",{ email:email, password:password }) /* dev server会代理 */ .then( /* 成功后返回执行函数 */ (function (response){ console.log(response.data) console.log("response.status: " + response.status); // 存储token,注意需要重开一次chrome的调试窗口才能看到 store.set("token",response.data.token,(new Date()).getTime() + (8*3600*1000)); this.loggedin = true; // 修改被观察者 }).bind(this) ).catch(/* 出错后执行函数 */ function(error){ console.log(error); } ) } // 注册函数 reg(name,email,password){ console.log(name,email,password) axios.post('/api/users/',{ email:email, password:password, name:name })/* dev server会代理 */ .then( response => { //此函数要注意this的问题 console.log(response.data); console.log(response.status); // * 存储token,注意需要重开一次chrome的调试窗口才能看到 store.set("token",response.data.token,(new Date()).getTime()+(8*3600*1000)); this.loggedin=true; //修改被观察者 } ).catch( error => { console.log(error); } ) } }
-
修改Reg.js组件
import React from "react"; import { Link, Redirect} from "react-router-dom"; import "../css/login.css" import UserServer from '../service/user'; import { observer } from 'mobx-react'; const userserver = new UserServer; export default class Reg extends React.Component { render() { return <_Reg service={ userserver} /> } } @observer class _Reg extends React.Component { validate(password,confirmpwd){ //表单验证函数 return password.value === confirmpwd.value } handleClick(event){ event.preventDefault(); const [name,email,password,confirmpwd] = event.target.form; console.log(this.validate(password,confirmpwd));// +要验证表单数据后才发往后台 this.props.service.reg(name.value,email.value,password.value); } render(){ if (this.props.service.loggedin){ //已经登录的用户不允许注册 return <Redirect to