后台管理系统如何实现登录？

基于react+umijs+Ts+antdPro实现一个常规的后台管理系统

1. 完成配置

• proxy.ts
• routes.ts
• config.ts
• ...

2. 登录

• 表单提交：此时发送一个action,将表单的value发送到model。

    const handleSubmit = (values: LoginParamsType) => {
    getSecretKey()
      .then((res: any) => {
        if (res.code === 1) {
          const { secretKey } = res.result;
          const { pwd } = values;
          const secretPwd = md5(pwd + secretKey);
          const { dispatch } = props;
          dispatch({
            type: 'login/login',
            payload: {
              ...values,
              pwd: secretPwd,
            },
          });
        }
      })
      .catch(() => {});
  };
  

• login-model响应action：调用后端接口(call)，将payload(提交的values)传递到后端。对得到结果进行判断，路由跳转到首页。effects将返回结果连接到reducer(put),reducer接收这些登录信息,并将这些信息返回供页面使用。

effects: {
    *login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLoginV2, payload);
      if (response.code === 1) {
        yield put({
          type: 'changeLoginStatus',
          payload: response,
        });
        yield put({
          type: 'changeLoginFlag',
          payload: {loginFlag: true},
        });
        message.success('登录成功！');
        // 1/优化重定向
        // 2/判断是有有currentuser没有直接去登陆
        // history.replace('/home');
        const { roleNum, roles, name, uuid } = response.result
        localStorage.setItem('PAJ', JSON.stringify({ roleNum, roles, name, uuid }));
        if (response.result.roles.length === 1) {
          window.location.href = '/home';
        } else {
          window.location.href = '/violet';
        }
      } else {
        yield put({
          type: 'changeLoginFlag',
          payload: {loginFlag: false},
        });
        message.error(response.msg || '网络错误！');
      }
    },
}

reducers: {
    changeLoginStatus(state, { payload }) {
      return {
        ...state,
        status: payload.status,
        type: payload.type,
      };
    },
}

• SecurityLayout进行验证：在路由跳转之前，被SecurityLayout包裹的页面组件进行验证。SecurityLayout生命周期发送一个action,保存用户的基本信息。

  componentDidMount() {
    this.setState({
      isReady: true,
    });
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }
  }

• user-model响应action:在此处先判断有没有用户信息（无需每次加载一个被SecurityLayout包裹的路由的时候都去保存用户信息），没有则请求，以及将用户信息存入localStorage。reducer接收用户信息,并将这些信息返回供页面使用。

effects: {
    const response = yield call(queryCurrent);
      localStorage.setItem('userInfo', JSON.stringify(response));
      yield put({
        type: 'saveCurrentUser',
        payload: response,
      });
}

reducers: {
    saveCurrentUser(state, action) {
      return {
        ...state,
        currentUser: action.payload || {},
      };
    },
}

• 验证流程走完之后，首页显示