谷粒后台项目的记录：React+Element-React （二）：登录页面（解决跨域）

Login组件

准备

1、创建Login文件夹，在该文件夹下创建login.jsx，login.less，前者是组件后者是样式
2、将login组件以路由的形式加载
login.jsx

import React from "react";

class Login extends ReactDOM.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <div>登录</div>;
  }
}

export default Login;

App.js

3、设置基本样式
4、使用form表单组件来完成用户名和密码

启动后台服务

1、先启动MongoDB数据库

MongoDB数据库的安装和启动

2、进入admin-server_final文件夹，输入以下命令启动服务器

npm start

项目配套资料下载

登录

封装登录请求函数并使用该函数

//加载
import { reqLogin } from "../api/index";
//使用
try {
   const res = await reqLogin(
     this.state.form.name,
     this.state.form.password
   );
   console.log(res.data);
 } catch (error) {
   console.log("请求登录失败:", error);
 }

请求登录接口
这里会出现跨域问题：
解决：通过代理服务器的方式，在package.json中加入下面这句代码

 "proxy":"http://localhost:5000"

使用message组件实现登录成功与失败的提示

登录成功后跳转到管理界面

this.props.history.replace('/')

保存登录状态
定义一个memoryUtil.js 模块用来在内存中保存一些数据

export default{
  //要保存的数据
}

使用时只需要引入该模块，并读取内部的数据
只保存到memoryUtil.js 还不够，还需要保存到session中。在定义一个storageUtil.js模块

memoryUtil.user = res.data.data;
storyageUtil.saveUser(res.data.data);

优化
如果已经登录，未退出那么当进入登录界面时应该立即跳转到管理界面

 //如果用户已经登录，自动跳转到管理界面
    const user = memoryUtil.user;
    if (user && user._id) {
      return <Redirect to="/" />;
    }