React 实践 - 网络请求 对接登录 API

上一篇 React 体验开箱即用

任何一个系统，提供交互能力的前提，需要通过网络进行数据传递到落地。

最原始的网络请求，浏览器进行可以通过 XMLHttpRequest 对象发起请求。现在有很多网络请求模块，对 XMLHttpRequest 进行了封装，最常用的 Axios

前端常用请求框架 Axios

Axios 使用于前端浏览器和 Node.js 服务端请求。浏览器端发起请求是封装了 XMLHttpRequest， Node 端发起请求使用 Node.js 原生 http/https 模块。

网络请求方式

• GET 请求会向数据库发索取数据的请求，从而来获取信息，该请求就像数据库的 select 操作一样，只是用来查询一下数据，不会修改、增加数据，不会影响资源的内容，即该请求不会产生副作用。无论进行多少次操作，结果都是一样的
• POST 请求同 PUT 请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，就像数据库的 insert 操作一样，会创建新的内容。几乎目前所有的提交操作都是用 POST 请求的
• PUT 请求是向服务器端发送数据的（与 GET 不同）从而改变信息，该请求就像数据库的 update 操作一样，用来修改数据的内容，但是不会增加数据的种类等，也就是说无论进行多少次 PUT 操作，其结果并没有不同
• DELETE 请求顾名思义，就是用来删除某一个资源的，该请求就像数据库的 delete 操作
• …

以上请求方式，在针对 RESTful，根据不同的请求方式，操作服务器资源

常用请求方式为： GET POST ； 由于使用 antd-design-pro，该框架集成封装了 umi-request，so 项目中使用到网络请求，都可以用 umi-request 来进行操作

要用 Axios 请求的可以参考 Axios 中文说明

umi-request 在项目 utils/request.js 文件中已经简单封装了一层。

登录界面结构

调整 moose-react-learn

调整路由访问。原来 http://localhost:8000/user/login => http://localhost:8000/login

• 创建 Login 目录，把原来 User/login 目录文件移动到 Login/index.jsx

• 修改目录 config/router.js

修改文件太多，可以访问 git 提交记录

https://gitee.com/shizidada/moose-react-learn/commits/master

• 重新运行项目访问 http://localhost:8000/login

• 默认账号 admin or user 密码 ant.design

• 使用这些账号都是走自带 mock 接口，admin/user 账号区分了权限，菜单路由会显示不同菜单

  

对接 真的 服务端接口

• 可以参考服务端项目 moose operator service
• 运行查看 moose operator service README 及环境准备
• 该项目已提供 登录 接口
• 参考
  • Spring Boot 2.x 快速入门
  • SpringBoot OAuth2.0 认证授权(密码模式)
  • SpringBoot OAuth2.0 封装登录、刷新令牌接口

POST localhost:7000/api/v1/account/login

• accountName // string 登录账号
• password // string 密码
• loginType // string 登录类型 （支持密码和短信验证码）

• 获取登录用户信息

POST localhost:7000/api/v1/user/info

• accessToken // 验证令牌 （登录成功之后会返回）

• 启动项目，使用 PostMan 进行接口调试

• 使用登录成功 accessToken 访问 user/info 接口

  

  

  

前端调用接口

• 修改代理 config/proxy.js，指向 moose operator service 服务地址 http://localhost:7000

dev: {
    '/api/': {
      target: 'http://localhost:7000',
      changeOrigin: true,
      pathRewrite: {
        '^': '',
      },
    },
  },

• 修改 services/login.js

export async function postAccountLogin(params) {
  // moose 服务提供的真实接口
  return request("/api/v1/account/login", {
    method: "POST",
    data: params,
  });
}

• 修改 services/user.js

export async function queryCurrent() {
  return request("/api/v1/user/info", { method: "POST" });
}

• 重写启动项目，访问 http://localhost:8000/ 会发生跳转

  这个时候为正常的逻辑，因为访问首页会去获取用户信息接口，用户信息接口需要权限才能访问，所以跳转到登录界面。

  

• 修改之后代码，仓库查看

https://gitee.com/shizidada/moose-react-learn/commits/master

• 修改和接口字段对应

错误的提交

• 查看登录界面，调用了 login model login函数，直接修改 login model login传递参数即可

....

const handleSubmit = (values) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, type },
    });
  };
.....

// login modle => *login
  *login({ payload }, { call, put }) {
    // 解构参数
    const { password, type, userName } = payload;
    // 重新拼装参数
    const params = {
      loginType: type === 'account' ? 'password' : 'sms_code',
      accountName: userName,
      password,
    };

    // 提交处理后的参数
    const response = yield call(postAccountLogin, params);
    yield put({
      type: 'changeLoginStatus',
      payload: response,
    }); // Login successfully

    // 返回 code 为 200 表示成功
    if (response.code === 200) {
      const urlParams = new URL(window.location.href);
      const params = getPageQuery();
      message.success('🎉 🎉 🎉  登录成功！');
      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;
        }
      }

      history.replace(redirect || '/');
    }
  },

• 修改后之后

修改之后还是不对

因为 umi-request发起请求的 Content-Typ 默认为 application/json

而 moose 服务 提供的参数接口不是通过 JSON 来接受的，moose 服务 默认为（application/x-www-form-urlencoded）所以还会报错

• 解决方法

  第一种：修改moose 服务接受参数为 JSON 格式

  第二种：修改 umi-request 请求 Content-Typ

• 使用第二种方式解决，修改登录接口

  export async function postAccountLogin(params) {
    return request("/api/v1/account/login", {
      method: "POST",
      // 添加 使用 application/x-www-form-urlencoded
      requestType: "form",
      data: params,
    });
  }
  

• 输入账号 江景 密码 123，登录成功

登录成功跳转首页，还是会再跳转到登录页

• 这个是因为 moose operator service 使用了 OAuth 2.0 授权，访问的 user/info 接口需要传递 accessToken 参数。

TODO：

登录之后保存 accessToken，携带 accessToken 继续访问其他接口

当 accessToken 过期后，重新刷新令牌，正常访问接口

DEMO 源码:

前端：https://gitee.com/shizidada/moose-react-learn

后端：https://gitee.com/shizidada/moose

关注公众号 「全栈技术部」，不断学习更多有趣的技术知识。