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

回顾

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

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

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

前端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'
  }
}

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

查看Antd pro的登录model(pityWeb\src\models\login.js)

image

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

改造登录接口(pityWeb\src\services\login.js)

image

代码很简单，由于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方法做了什么:

image

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

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

image

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

    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（或者右键打开开发者工具）可以看到:

image

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

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

可以从前端也可以从后端的角度来处理，我们为了方便，直接改造我们的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)

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