{/* 当前面的路由都匹配不到时就会重定向到/404 */}
);
}
```
名词解释：
- Switch: 该组件表示只匹配一个，匹配到后不再继续往下匹配
- Route：路由组件
- exact：表示完全匹配，如果开启这个，`/`只匹配`/`,否则匹配所有的路径
- Redirect：重定向组件，当前面的都不匹配就会匹配这个（因为没有开启`exact`且 path 为`/`),然后重定向到`/404`
后续用到嵌套路由时会更加深入的讲解路由相关。
## 配置 http 请求工具
http 请求工具这里选择的是`axios`。
首先安装依赖：
```bash
cnpm install --save axios
```
然后编写工具类`util/httpUtil.js`,代码如下：
```javascript
// httpUtil.js
import { notification } from "antd";
import axios from "axios";
//定义http实例
const instance = axios.create({
// baseURL: "http://ali.tapme.top:8081/mock/16/chat/api/",
headers: {
token: window.token
}
});
//实例添加拦截器
instance.interceptors.response.use(
function(res) {
return res.data;
},
function(error) {
console.log(error);
let message, description;
if (error.response === undefined) {
message = "出问题啦";
description = "你的网络有问题";
} else {
message = "出问题啦:" + error.response.status;
description = JSON.stringify(error.response.data);
//401跳转到登录页面
}
notification.open({
message,
description,
duration: 2
});
setTimeout(() => {
if (error.response && error.response.status === 401) {
let redirect = encodeURIComponent(window.location.pathname + window.location.search);
window.location.replace("/public/login?redirect=" + redirect);
}
}, 1000);
return Promise.reject(error);
}
);
export default instance;
```
主要实现了如下功能：
- 自动添加 token，设计前后端通过 jwt 做认证，因此每个请求都要加上 token
- 响应预处理，如果有错误，自动弹窗提示。如果响应码为 401，重定向到登录页面。
## 配置 redux
redux 算是 react 的一大难点。这里我们可以把 redux 理解成一个内存数据库，用一个对象来存储所有的数据.
对这个数据的修改有着严格的限制，必须通过 reducer 来修改数据，通过 action 定义修改的动作。
这里以用户登录数据为例。
### 定义
1. 首先定义 action，创建文件`redux/action/loginInfoAction.js`,代码如下：
```javascript
// 定义登录信息在store中的名字
export const DATA_NAME = "loginInfo";
//定义修改loginInfo type
export const CHANGE_LOGIN_INFO = "changeLoginStatus";
export const changeLoginInfo = (token, userInfo) => {
return {
type: CHANGE_LOGIN_INFO,
data: {
token,
userInfo
}
};
};
```
- CHANGE_LOGIN_INFO :定义操作类别
- changeLoginInfo: 定义一个 action，在组件中调用，传入要修改的数据，在这里加上 type 上传递到 reducer 中处理.
2. 定义 reducer，创建文件`redux/reducer/loginInfo.js`,代码如下：
```javascript
import * as loginAction from "../action/loginInfoAction";
function getInitData() {
let token, userInfo;
try {
token = localStorage.getItem("token");
userInfo = JSON.parse(localStorage.getItem("userInfo"));
} catch (e) {
console.error(e);
token = null;
userInfo = null;
}
window.token = token;
window.userInfo = userInfo;
return {
token,
userInfo
};
}
const LoginStatusReducer = (state = getInitData(), action) => {
switch (action.type) {
case loginAction.CHANGE_LOGIN_INFO:
return { ...action.data };
default:
return state;
}
};
export default LoginStatusReducer;
```
- getInitData 方法用于初始化 userInfo 数据，这里写的比较复杂，会先从 localeStore 中取数据，然后挂载到 window 中，方便`httpUtil`中获取 token。
- LoginStatusReducer 方法用于处理 action 中的数据，输出处理后的 loginInfo 数据。
3. 编写 reducer 汇总类(redux/reducer/index.js)，所有 reducer 都要汇总到一个方法中，这样就能生成整个系统的 store 对象。代码如下：
```javascript
import { combineReducers } from "redux";
import { DATA_NAME } from "../action/loginInfoAction";
import loginInfo from "./loginInfo";
const data = {};
data[DATA_NAME] = loginInfo;
const reducer = combineReducers(data);
export default reducer;
```
4. 编写`redux/index.js`，这里生成真正的数据对象，代码如下：
```javascript
import { createStore } from "redux";
import reducer from "./reducer";
const store = createStore(reducer);
export default store;
```
5. 最后将 store 绑定到根节点(App.js)中即可,修改部分如下：
### 使用
这里以登录页为例，学习如何获取到 loginInfo 和修改 loginInfo.
1. 创建登录页组件，`pages/public/Login/index.js`
登录页代码如下：
```javascript
import React, { Component } from "react";
import queryString from "query-string";
import { Button, Input, message } from "antd";
import IconFont from "../../../components/IconFont";
import styles from "./index.module.less";
import { connect } from "react-redux";
import { changeLoginInfo, DATA_NAME } from "../../../redux/action/loginInfoAction";
import axios from "../../../util/httpUtil";
function mapStateToProps(state) {
return state[DATA_NAME];
}
function mapDispatchToProps(dispatch) {
return {
updateLoginInfo: (token, userInfo) => dispatch(changeLoginInfo(token, userInfo))
};
}
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
this.query = queryString.parse(window.location.search);
}
usernameInput = e => {
this.setState({ username: e.target.value });
};
passwordInput = e => {
this.setState({ password: e.target.value });
};
submit = () => {
axios.post("/public/login", this.state).then(res => {
localStorage.setItem("token", res.token);
localStorage.setItem("userInfo", JSON.stringify(res.userInfo));
window.token = res.token;
window.userInfo = res.userInfo;
message.success("登录成功");
this.props.updateLoginInfo(res.token, res.userInfo);
if (this.query.redirect) {
this.props.history.replace(decodeURIComponent(this.query.redirect));
} else {
this.props.history.replace("/");
}
});
};
render() {
return (