专栏文章测试平台系列 (9) 与前端联调注册/登录接口 (下)

米洛 · 2021年12月01日 · 最后由米洛回复于 2022年01月23日 · 4109 次阅读

与前端联调注册/登录接口 (part 2)

回顾

上篇我们说啥来着，噢对说要跟前端联调来着。这期呢，咱们就开始着手写这块内容。

这里如果前端不太熟悉的话，代码就暂时别仔细看了，因为肯定也不会太理解 (虽然我还是会讲讲)。

前端 IDE 配置

这里我推荐Webstorm，至于 vscode 本人确实不太感冒，虽然会轻量级一点。(我就是喜欢 jetbrains 全家桶)

如果没有的话，可以用 Pycharm 下载 Webstorm 插件进行开发。

建立配置文件

首先我们第一步先建立配置文件: pityWeb\src\consts\config.js

export const CONFIG = {
  URL: 'http://localhost:7777',
  ROLE: {
    0: 'user',
    1: 'admin',
    2: 'superAdmin'
  }
}

存储我们的后端地址和用户角色信息。

可以看到默认采用的 fakeAccountLogin 方法 (这里被我注释掉了)，我们找到他:

代码很简单，由于 antd pro 给我们封装好了基本的 Request 方法，所以我们可以直接按部就班，依葫芦画瓢写出请求auth/login的程序，完整代码:

import { CONFIG } from '@/consts/config';

export async function login(params) {
  return request(`${CONFIG.URL}/auth/login`, {
    method: 'POST',
    data: params
  })
}

修改用户的登录状态

仔细看 model 中的 login 方法，它做了 2 步:

登录（mock）
将登录成功/失败的信息传入 changeLoginStatus 方法

我们看看changeLoginStatus方法做了什么:

先设置用户的权限，这里我把 ROLE 已经带入进来
设置当前状态: ok 代表登录成功 error 代表未成功，由于咱们用的不是 status 状态判断用户是否登录成功，所以需要修改为三元表达式: payload.code === 0 ? 'ok': 'error'

上述具体返回信息可以从下图中看到

这里代码我们进行相应调整:

changeLoginStatus(state, { payload }) {
  // setAuthority(payload.currentAuthority);
  setAuthority(CONFIG.ROLE[payload.user.role]);
  return { ...state, status: payload.code === 0 ? 'ok': 'error', type: payload.type };
},

注意这里也从mock替换成了真实接口

尝试一下

提示网络错误

别慌，我们 F12（或者右键打开开发者工具）可以看到:

没错，我们遇到了跨域问题。

跨域问题具体可以去百度一下，这里简单介绍一下，是说浏览器出于安全考虑，对于前后端域名不一致的情况下，会默认进行拦截，阻止你们进行交互。这多见于前后端分离的项目中出现。

可以从前端也可以从后端的角度来处理，我们为了方便，直接改造我们的Flask。

使 Flask 支持跨域

我们需要先安装一个包: pip3 install flask-cors

然后进行如下改造:

pity/app/__init__.py

注意这个是后端的项目哈，不要搞错了，前后端分离就是前端也搞后端也搞，需要切换。

from flask import Flask
from flask_cors import CORS

from config import Config

pity = Flask(__name__)
CORS(pity, supports_credentials=True)

pity.config.from_object(Config)