登录模块(自动登录)
render里面要直接跳到某个页面要用return <Redirect to="/" /> 不用this.props.history.replace('/'); 因为render里面必定return
this.props.history.replace用在点击回调事件里面
1.admin.js里面
<script> render() { //读取保存的user ,如果不存在直接跳转到登录页面 const user = JSON.parse(localStorage.getItem('user_key') || '{}')
//const user= memoryUtils.user 后期改进版 if (!user._id) { // this.props.history.replace('/login') //事件回调中使用 return <Redirect to="/login" /> } </script>
2.login.js里面
<script> if(res.code === '0000'){ //跳转到管理页面 const user = res.data localStorage.setItem('user_key',JSON.stringify(user))
//storageUtils.saveUser(user) 改进版
//memoryUtils.user=user 终极版(增加)
this.props.history.replace('/') message.success('登录成功') }else{ message.error(res.msg) //res.msg后端返回的信息 } render() { const user = JSON.parse(localStorage.getItem('user_key') || '{}')
//const user = memoryUtils.user 终极版
//改进版:const user = storageUtils.getUser()
if (user._id) { return <Redirect to="/" /> } </script>
封装保存用户,读取用户,删除用户为方法
<script> const USER_KEY = 'user_key' export default { //返回user对象,如果没有返回{} getUser() { return JSON.parse(localStorage.getItem(USER_KEY)||'{}') }, //保存user saveUser(user) { localStorage.setItem(USER_KEY,JSON.stringify(user)) }, //删除user removeUser() { localStorage.removeItem(USER_KEY) } } </script>
github有个库 叫store.js 比较兼容 比原生localstorage兼容
<script> import store from 'store' const USER_KEY = 'user_key' export default { //返回user对象,如果没有返回{} getUser() { // return JSON.parse(localStorage.getItem(USER_KEY)||'{}') return store.get(USER_KEY) || {} //store.get(USER_KEY)是已经解析好了的 所以之间后面写{} }, //保存user saveUser(user) { // localStorage.setItem(USER_KEY,JSON.stringify(user)) store.set(USER_KEY,user) }, //删除user removeUser() { // localStorage.removeItem(USER_KEY) store.removeItem(USER_KEY) } } </script>
优化:每次都去storage里存取,到文件去存取比较慢,直接在内存在存取快,所以创建一个memoryUtils
memoryUtils.js
<script> import storageUtils from "./storageUtils"; export default{ user:storageUtils.getUser()//用来存储登录用户信息,默认没有登录.初始值为local中读取的 //什么时候才有值,当然是尽早的到localstorage里去拿值,index.js是入口文件,可以在这里,但也可以在不同组件中引入 } </script>