Ant-design-pro: 🐛[BUG] Login doesn't work properly if /api/currentUser route is protected

[sibyaugustine]

🐛 Bug description

I protected route /api/currentUser. Its redirecting to Login page if its is not authenticated. This is a right behaviour but the problem is once after entering correct credential still its redirecting to the Login page. If you try to login twice it works.

📷 Recurring step

1.Protect /api/currentUser route

🏞 Desired result

Login should happen after entering proper credenctial.

💻 Complex modern code

Feels like following flags are not working properly... After login, loading flag shows as false always...

/.../src/layouts/SecurityLayout.tsx
if ((!isLogin && loading) || !isReady) {
return ;
}
if (!isLogin) {
return /user/login?${queryString}}>;
}

© Version Information

• Ant Design Pro 4.0.0
• linux

[sibyaugustine]

@chenshuai2144 can you please suggest some solution for this ?

[chenshuai2144]

const isLogin = currentUser && currentUser.userid;
Maybe there is a problem here.
You can change this to your own judgment logic.

or you don't run ？
https://github.com/ant-design/ant-design-pro/blob/master/src/models/login.ts#L85

[sibyaugustine]

Thanks for your comment. But the problem is with dva 'loading' flag its comming as false and redirecting to login page once again. If we try to login again it works. There is some problem with cached data on the model or render. You can predecit it correctly.
if ((!isLogin && loading) || !isReady) { return <PageLoading />; } if (!isLogin) { return <Redirect to={"/user/login?${queryString}"}></Redirect>; }

[sibyaugustine]

It's better to explain how to reproduce the issue
1.npm i -D cookie
2.Update mock/user.ts with following contents
........................
........................
'GET /api/currentUser': (req: Request, res: Response) => {
const cookies = cookie.parse(req.headers.cookie || '');
var isLogin = cookies.isLogin;
if (isLogin) {
res.send({
name: 'Serati Ma',
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
userid: '00000001',
email: '[email protected]',
signature: '海纳百川，有容乃大',
title: '交互专家',
group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
tags: [
{
key: '0',
label: '很有想法的',
},
{
key: '1',
label: '专注设计',
},
{
key: '2',
label: '辣~',
},
{
key: '3',
label: '大长腿',
},
{
key: '4',
label: '川妹子',
},
{
key: '5',
label: '海纳百川',
},
],
notifyCount: 12,
unreadCount: 11,
country: 'China',
geographic: {
province: {
label: '浙江省',
key: '330000',
},
city: {
label: '杭州市',
key: '330100',
},
},
address: '西湖区工专路 77 号',
phone: '0752-268888888',
})
} else {
res.status(401).send();
}
}

POST /api/login/account': (req: Request, res: Response) => {
const { password, userName, type } = req.body;
if (password === 'ant.design' && userName === 'admin') {
console.log('cookie set');
res.cookie('isLogin', "done", { maxAge: 900000, httpOnly: true });
res.send({
status: 'ok',
type,
currentAuthority: 'admin',
});
return;
}
if (password === 'ant.design' && userName === 'user') {
console.log('cookie set');
res.cookie('isLogin', "done", { maxAge: 900000, httpOnly: true });
res.send({
status: 'ok',
type,
currentAuthority: 'user',
});
return;
}
res.send({
status: 'error',
type,
currentAuthority: 'guest',
});
}
..................
.................

3.Goto http://localhost:8000/welcome

1. It will redirect to http://localhost:8000/user/login
2. Try to login with admin/ant.design , it works only if you try two times.

Let me know if you require any other pieces of information. Thanks in advance :)

[nedosa]

I can also confirm that I've been hit by this. It's much simpler to reproduce also, if one follows the instructions here https://pro.ant.design/docs/getting-started and without making any modifications, login to the /welcome page only works if credentials are entered twice.

The connect function in SecurityLayout.tsx is called twice with very different payloads, which is where I believe the problem lies, first time with parameters that seem to be coming from routing and the second time with parameters coming from the user state.

[jinuem]

Same Issue I am facing.
Without making any changes to the code , Even new bootstrap code itself having the same issue.

[chenshuai2144]

try copy master code？

[nedosa]

Thanks @chenshuai2144 . Would you mind offering some advise on how to work with umi block list and umi block add and the code in master ? Alternatively, if there is a commit that fixes the issue, then I could just cherry pick the code that fixes the issue in my own repo.

[jinuem]

@chenshuai2144 I tried to log in with the master code, it's redirecting correctly. But after installing the Umi blocks, this issue happens.
What may be the reason?

[jinuem]

@nedosa @sibyaugustine
Have you guys found any solution?

[nedosa]

I haven't, my only recourse is to check auth code in master against what's installed with umi.

[nedosa]

I tried with the latest ant-design-pro master and the two-login-attempts problem is still there. @chenshuai2144 can you replicate the issue also ?

[jinuem]

@chenshuai2144 @sibyaugustine
any solutions on this?

[sibyaugustine]

I used some work around for solving the problem.
I removed SecurityLayout from config/config.ts added extra navigation code on src/utils/request.ts.

config/config.ts
........................................
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'
.........................................

src/utils/request.ts
.............................
............................
if (status == 401 && window.location.href.indexOf('redirect') === -1) {
const queryString = stringify({
redirect: window.location.href,
});
router.push(/user/login?${queryString});
}
...............................
...............................