共计 2539 个字符,预计需要花费 7 分钟才能阅读完成。
本地存储 localstorage
判断用户是否登录
APP.js
import React, {Component} from 'react';
import {BrowserRouter, Switch, Route, Redirect} from "react-router-dom";
import Login from './pages/login';
import Home from './pages/home';
class App extends Component{
state = {userInfo: {}
};
componentWillMount() {
// 获取 localstorage
let userInfo = localStorage.getItem("userInfo");
// 判断用户是否登录 / 登录信息是否过期
if(userInfo && Date.now() - JSON.parse(userInfo).date < 2 * 60 * 60 * 1000) {this.setState({userInfo: JSON.parse(userInfo)});
}
}
render() {const { userInfo} = this.state;
let {search} = window.location;
return (
<BrowserRouter>
<Switch>
<Route path="/login" render={() =>
Object.keys(userInfo).length > 0
? <Redirect to={
search
? decodeURIComponent(search.split("=")[1])
: "/"
} />
: <Login />
} />
<Route path="/" render={() => (Object.keys(userInfo).length > 0
? <Home />
: <Redirect to={"/login?redirect=" + encodeURIComponent(window.location.pathname)} />
)} />
</Switch>
</BrowserRouter>
);
}
}
export default App;
login/index.jsx
import React, {Component} from 'react';
import {Input, Icon, message} from 'antd';
class Login extends Component {constructor(props) {super(props);
this.login = this.login.bind(this);
this.state = {
loginInfo: {
username: "",
password: ""
},
redirect_url: ""
}
}
componentDidMount() {const { search} = window.location;
const redirect_url = search ? decodeURIComponent(search.split("=")[1]) : "/";
this.setState({redirect_url});
}
render() {const { loginInfo} = this.state;
return (
<div className="login-bg">
<div className="login-form-wrapper">
<div className="login-form">
<h4 className="login-title"> 登录 </h4>
<Input
value={loginInfo.username}
size="large"
onChange={e => this.changeInputValue(e.target.value, "username")}
prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)', marginRight: 10}}/>}
style={{marginBottom: 30}}
placeholder="用户名"
/>
<Input
value={loginInfo.password}
size="large"
type="password"
onChange={e => this.changeInputValue(e.target.value, "password")}
prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)', marginRight: 10}}/>}
placeholder="密码"
/>
<div className="login-btn cursor" onClick={this.login}> 登录 </div>
</div>
</div>
</div>
)
}
changeInputValue(value, name) {const { loginInfo} = this.state;
loginInfo[name] = value;
this.setState(state => ({loginInfo: {...state.loginInfo, ...loginInfo}}))
}
login() {const { loginInfo, redirect_url} = this.state;
if(!loginInfo.username
|| !loginInfo.password
|| (loginInfo.username !== "admin"
&& loginInfo.password !== "123456")) return message.error("用户名或密码输入有误");
loginInfo.date = new Date().getTime();
const userInfo = JSON.stringify(loginInfo);
localStorage.setItem("userInfo", userInfo);
window.location.href = redirect_url;
this.setState({loginInfo: {}, redirect_url: ""});
message.success("登录成功")
}
}
export default Login;
正文完
发表至: javascript
2019-07-19