1.登录界面样式部分（src ->pages->user->login.js）
render() {
const { login, submitting } = this.props;
const { type} = this.state;
return (
<div className={styles.main}>
<Login
defaultActiveKey={type}
onTabChange={this.onTabChange}
onSubmit={this.handleSubmit}
ref={form => { this.loginForm = form;}}
>
<div key="account">
//点击登录后，判断错误时返回相应的提示
{login.status === 'error' &&
login.type === 'account' &&
!submitting &&
this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}
//用户名
<UserName
name="name"
placeholder={`${formatMessage({ id: 'app.login.userName' })}: 请输入用户名`}
rules={[
{
required: true,
message: formatMessage({ id: 'validation.userName.required' }),
},
]}
/>
//密码
<Password
name="password"
placeholder={`${formatMessage({ id: 'app.login.password' })}: 请输入密码`}
rules={[
{
required: true,
message: formatMessage({ id: 'validation.password.required' }),
},
]}
onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
/>
</div>
//登录提交
<Submit loading={submitting}>
<FormattedMessage id="app.login.login" />
</Submit>
</Login>
</div>
);
}
}
使用 rules={[{required: true,message: formatMessage({ id: ‘validation.password.required’ }), },]}进行输入框为空判断
注：pro 通过 umi 插件 umi-plugin-locale 来实现全球化的功能，并且默认开启。 umi-plugin-locale 约定 在src/locales 中引入 相应的 js，例如 en-US.js 和 zh-CN.js， 并且在 config/config.js 中进行了相关的配置。
因此，在zh-CN.js中进行文字内容的编写设置。
handleSubmit = (err, values) => {
const { type } = this.state;
if (!err) {
const { dispatch } = this.props;
dispatch({
type: 'login/login',
payload: {
...values,
type,
},
});
}
};
export async function fakeAccountLogin(params) {
//params为前端发送的数据
console.log(params);
return request('/api/login/account', {
method: 'POST',
body: params,
});
}
前端发送的数据为params，发送的post请求，携带的内容为params。
*login({ payload }, { call, put }) {
const response = yield call(fakeAccountLogin, payload);
yield put({
type: 'changeLoginStatus',
payload: response,
});
// Login successfully
if (response.status === 'ok') {
reloadAuthorized();
const urlParams = new URL(window.location.href);
const params = getPageQuery();
let { redirect } = params;
if (redirect) {
const redirectUrlParams = new URL(redirect);
if (redirectUrlParams.origin === urlParams.origin) {
redirect = redirect.substr(urlParams.origin.length);
if (redirect.match(/^\/.*#/)) {
redirect = redirect.substr(redirect.indexOf('#') + 1);
}
} else {
window.location.href = redirect;
return;
}
}
yield put(routerRedux.replace(redirect || '/'));
}
},
此时后台应发送的数据有：
1，登录信息校验成功，返回status为ok
2.用户权限currentAuthority
注意：该框架中把权限设置单独创建了组建，为utils->authority.js，在这个js中设置了权限判断，没有权限则会进行重定向。因此需要有用户权限，对后端发送的请求进行相应的解析。
**1.**如果校验失败，后端返回失败，前端则进行错误信息提示
{login.status === 'error' &&
login.type === 'account' &&
!submitting &&
this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}
renderMessage = content => (
<Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
);
2.成功则页面跳转到首页。
1.需要对前端请求后端数据的过程有一定的了解
2.对发送的请求数据以及接收的数据进行相应的处理，数据解析成为自己前端想要渲染的数据。
3.yield call() 来调用（数据接口方法 和 请求参数），yield表示同步调用，这个是generator提供的功能。
4.server里面定义自己的request的请求
5.Fetch发送数据