react ant-design-pro项目搭建（三）——调用接口实现与服务器的交互

最新推荐文章于 2025-05-07 18:07:55 发布

原创最新推荐文章于 2025-05-07 18:07:55 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

react

3 篇文章

订阅专栏

本文详细介绍了在Ant Design Pro项目中实现登录功能的具体步骤，包括创建登录服务、调用后端接口、状态管理及页面请求处理。通过具体代码示例，读者可以了解如何在实际项目中进行登录流程的开发。

在下载的脚手架中已经有调用接口实现与服务器的交互的例子了，我们以登录流程为例来进行讲解

1.在services层创建名为login的service,定义调用后端接口的方法

2.在model层创建名为login的model调用services中方法

import { stringify } from 'querystring';
import { router } from 'umi';
import { fakeAccountLogin, getFakeCaptcha } from '@/services/login';
import { setAuthority } from '@/utils/authority';
import { getPageQuery } from '@/utils/utils';
const Model = {
  namespace: 'login',//命名空间，必须是唯一的名字
  state: {
    status: undefined,
  },
  effects: {
    *login({ payload }, { call, put }) {
      //调用services中的fakeAccountLogin函数
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      }); // Login successfully

      if (response.code === 200) {
        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 = '/';
            return;
          }
        }

        router.replace(redirect || '/');
      }
    }
  },
  reducers: {//要想改变state中的数据，必须通过reducers，
    //payload是参数
    changeLoginStatus(state, { payload }) {
      setAuthority(payload.currentAuthority);
      return { ...state, status: payload.status, type: payload.type };
    },
  },
};
export default Model;

3.页面发起登录请求