用户中心项目问题-无法跳转欢迎页

关键词
welcome
欢迎页
用户中心
无法跳转
问题描述

在登录后，无法跳转到欢迎页，经过chrome查看login和current接口均有返回值

进一步排查后，发现在登录接口有返回值

// Login/index.tsx文件

const handleSubmit = async (values: API.LoginParams) => {

try {

// 登录

const user = await login({

...values,

type,

});

// 此处user有值！！！！！

if (user) {

const defaultLoginSuccessMessage = '登录成功！';

message.success(defaultLoginSuccessMessage);

await fetchUserInfo();

/** 此方法会跳转到 redirect 参数所在的位置 */

if (!history) return;

const { query } = history.location;

const { redirect } = query as {

redirect: string;

};

history.push(redirect || '/');

return;

}

然后if代码块中调用的await fetchUserInfo();的方法中currentUser为空，所以InitialState中没有封装currentUser

// Login/index.tsx文件

const fetchUserInfo = async () => {

const currentUser = await initialState?.fetchUserInfo?.();

if (currentUser) {

await setInitialState((s) => ({

...s,

currentUser

}));

}

};

导致在app.tsx中，页面更新时，也就是登陆后跳转页面时，查询不到登录用户的信息，不断跳转到登录页

onPageChange: () => {

const { location } = history;

if (NO_NEED_LOGIN_WHITE_LIST.includes(location.pathname)) {

return;

}

// 如果没有登录，重定向到 login

// 此处currentUser为空，所以导致一直重定向

if (!initialState?.currentUser) {

history.push(loginPath);

}

而在chrome开发工具中开current的请求是有返回数据的，不明白为什么currentUser中没有封装上数据

解决

上面的问题描述中说了，原因是currentUser没有封装有数据，所以更改了fetchUserInfo->queryCurrentUser方法中的返回结果泛型

修改前（apt.tsx文件）：

export async function currentUser(options?: { [key: string]: any }) {

return request<{

data: API.CurrentUser

}>('/user/current', {

method: 'GET',

...(options || {}),

});

}

修改后（apt.tsx文件）：

export async function currentUser(options?: { [key: string]: any }) {

return request<

API.CurrentUser

>('/user/current', {

method: 'GET',

...(options || {}),

});

}

总结一下原因，因为后端返回值是一个对象，而前端的封装层级比后端传回来的多一级，所以封装不上数据，前后端的对象容器不一样，所以内容放不进去

修改了上面的返回值类型后，还需修改在app.tsx中的fetchUserInfo方法定义

修改前：

const fetchUserInfo = async () => {

try {

const msg = await queryCurrentUser();

return msg.data;

} catch (error) {

history.push(loginPath);

}

return undefined;

};

修改后：

const fetchUserInfo = async () => {

try {

return await queryCurrentUser();

} catch (error) {

history.push(loginPath);

}

return undefined;

};

用户中心bug-无法跳转欢迎页的全部评论