配置本地开发服务器代理请求以及登录模块开发（二）

项目初始化完成之后，准备开始进行项目的开发，首先配置好开发环境作为整个项目的基础

一、配置代理

1、config/proxy.ts配置代理

export default {// 如果需要自定义本地开发服务器  请取消注释按需调整dev: {// localhost:8000/api/** -> https://preview.pro.ant.design/api/**'/api/': {// 要代理的地址target: 'https://www.niech.cn:8080',// 配置了这个可以从 http 代理到 https// 依赖 origin 的功能可能需要这个，比如 cookiechangeOrigin: true,},}
}

2、src/services/ant-design-pro/api.ts改造原有login登录接口

/** 登录接口 POST /api/user/login */
export async function login(body: API.LoginParams, options?: { [key: string]: any }) {return request<API.LoginResult>('/api/user/login', {method: 'POST',headers: {'Content-Type': 'application/json',},data: body,...(options || {}),});
}

在这里插入图片描述
验证登录接口，请求成功，但是页面未跳转首页，这里需要检查代码,这里定位登录函数

const handleSubmit = async (values: API.LoginParams) => {try {// 登录const msg = await login({ ...values, type });if (msg.status === 'ok') {const defaultLoginSuccessMessage = intl.formatMessage({id: 'pages.login.success',defaultMessage: '登录成功！',});message.success(defaultLoginSuccessMessage);await fetchUserInfo();const urlParams = new URL(window.location.href).searchParams;history.push(urlParams.get('redirect') || '/');return;}console.log(msg);// 如果失败去设置用户错误信息setUserLoginState(msg);} catch (error) {const defaultLoginFailureMessage = intl.formatMessage({id: 'pages.login.failure',defaultMessage: '登录失败，请重试！',});console.log(error);message.error(defaultLoginFailureMessage);}};

我们自己登录接口的数据结构和模板略有不同，这里需要进行改造

 const handleSubmit = async (values: API.LoginParams) => {try {// 登录const res = await login({ ...values, type });if (res.code === 200) {localStorage.setItem('token',res.token);const defaultLoginSuccessMessage = intl.formatMessage({id: 'pages.login.success',defaultMessage: '登录成功！',});message.success(defaultLoginSuccessMessage);await fetchUserInfo();const urlParams = new URL(window.location.href).searchParams;history.push(urlParams.get('redirect') || '/');return;}console.log(res);// 如果失败去设置用户错误信息setUserLoginState(res);} catch (error) {const defaultLoginFailureMessage = intl.formatMessage({id: 'pages.login.failure',defaultMessage: '登录失败，请重试！',});console.log(error);message.error(defaultLoginFailureMessage);}};const { code, type: loginType } = userLoginState;

3、src/services/ant-design-pro/api.ts改造原有获取用户信息接口

/** 获取当前的用户 GET /api/user/getUserInfo */
export async function currentUser(options?: { [key: string]: any }) {return request<{data: API.CurrentUser;}>('/api/user/getUserInfo', {method: 'GET',...(options || {}),});
}

4、src/requestErrorConfig.ts改造接口请求响应拦截器

// 请求拦截器requestInterceptors: [(config: any) => {// 拦截请求配置，进行个性化处理。if (localStorage.getItem('token')) {config.headers['Authorization'] = localStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改}const url = config?.url;return { ...config, url };},],// 响应拦截器responseInterceptors: [(response) => {console.log('response',response)// 拦截响应数据，进行个性化处理const { data } = response as unknown as ResponseStructure;if (data.code === 401) {message.error('登录状态已过期，请重新登录');history.push('/user/login');}else if (data.code === 403) {message.error('暂无权限');}else if (data.code === 500) {message.error(data.msg);}return response;},],