测试平台系列(9) 与前端联调注册/登录接口(part 2)

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

回顾

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

这里如果前端不太擅长的呢，代码你就别仔细看了，因为你肯定也不太理解(虽然我还是会讲讲)。

你只需要搬个小板凳，看看具体解决了哪些问题就行，不需要想着怎么去写前端代码，直接copy一下就完事了！（好家伙，我直呼好家伙！）

前端IDE配置

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

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

建立配置文件

首先我们第一步先建立配置文件: pityWebsrcconstsconfig.js

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

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

查看Antd pro的登录model(pityWebsrcmodelslogin.js)

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

改造登录接口(pityWebsrcserviceslogin.js)

代码很简单，由于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步:

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

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

1. 先设置用户的权限，这里我把ROLE已经带入进来
2. 设置当前状态: 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)

贴心的我还是贴出了源代码。

再次尝试

重启下后端服务哦记得

输入错误的用户名密码，可以看到登录按钮转了一圈又回到了原点。但是登录接口又是正常响应的:

仔细查看登录块的代码，原来是「没有输出错误信息」。我们继续进行改造:

加个else即可

message.error可以弹出错误信息: 用户名或密码错误

目的达到了，接下来我们来试试正确的用户名和密码:

可以看到提示成功后又报错了

我们去找到api/currentUser接口的调用地方:

可以看到是这个方法在作祟，因为antd pro会mock一个用户，它有姓名等信息，但这些我们需要真实的，所以需要给他进行一次改造:

改造获取当前用户信息

还记得我们的登录接口返回的数据吗？我们每次登录后，把它写入浏览器缓存中，这样当用户登录以后，我们从浏览器缓存取出用户信息即可。

1. 先将用户信息和token设置到缓存

localStorage可以操作浏览器缓存，但是只接受string和string的键值对，所以我们需要把user对象序列化为string。

2. 从缓存中取出数据

记得数据需要反序列化

3. 修改登录判断条件，这个坑找了我很久，因为咱们的字段是id不是userId，所以我刚才卡在一直登录了自动被退出:

保存后再次尝试

一次点亮

好了，今天的内容就到这了。前端代码已上传~

后端代码地址: https://github.com/wuranxu/pity

前端代码地址: https://github.com/wuranxu/pityWeb

「觉得有用的话可以帮忙点个Star哦QAQ」