Logout and login again issue with UI5 application and App Router

[zje8szh]

Hello Experts,

We have three applications deployed on SAP Cloud Platform Cloud Foundry. App Router, UI application(UI5) and service application(JAVA).

Below is simple application architecture.

Reproduce steps:

1. User login to application by App router. The home page of UI5 application is displayed successfully. All the data from backend java application are retrieved successfully. We can also get login user info in App router.

https://***-approuter-***.cfapps.eu10.hana.ondemand.com/

2. Click logout button to sign off

3. Login again with the App Router URL

https://***-approuter-***.cfapps.eu10.hana.ondemand.com/

The problem is we can open the home page of application without login again. But there is no login user info. If you refresh the page, user will be redirected to the login page of XSUAA service.

If I directly access the service url of java application by the following URL, I will be redirected to login page.

https://***-approuter-***.cfapps.eu10.hana.ondemand.com/backend/hello

I think the problem is the cache of UI5 application. But I do not know how to fix it. Could you give some suggestions?

xs-app.json configuration of app router

{
"welcomeFile": "frontend/",
"logout": {
"logoutEndpoint": "/logout",
"logoutPage": "/logout.html"
 },
"authenticationMethod": "route",
"routes": [
 {
"source": "^/backend/(.*)$",
"target": "$1",
"destination": "service",
"authenticationType": "xsuaa"
 },
 {
"source": "^/logout.html$",
"localDir": "resources",
"authenticationType": "none",
"cacheControl": "no-cache"
 },
 {
"source": "^/frontend/(.*)$",
"target": "$1",
"destination": "frontend",
"authenticationType": "xsuaa",
"cacheControl": "no-cache"
 }
 ]
}

[prasad]

Hi zje8szh,

Even i have the same issue . can you provide a sample in webide how the project structure was present.

i have a created a MTA project and inside that created a New Module of type HTML5 . which created a folder with module name and inside it has a webapp folder.

logoff i have maintained in webapp folder only .

below is code in xs-app.json

{
"welcomeFile": "/UI/index.html",
"authenticationMethod": "route",
"logout": {
"logoutEndpoint": "/my/logout",
"logoutPage": "/logout.html"
},
"routes": [ {
"source": "^/logout.html$",
"localDir": "webapp",
"cacheControl": "no-cache",
"authenticationType": "none"
}, {
"source": "^/index.html$",
"localDir": "webapp",
"authenticationType": "xsuaa",
"cacheControl": "no-cache"
}
]
}

Regards

Prasad

[zje8szh · Accepted solution]

The issue was resolved by using HTML5 repository in SAP UI5 Application.

Do remember to add property "cacheControl" in your app router configurations.

[former_member599006 · Accepted solution]

Hi Jerry,

I am trying to use the same in Cloud Foundry, could you please help me to find solution, it is navigating to logout page, but on click of back the index is loading without asking for login credentials

Regards,
VM Kumar

[zje8szh · Accepted solution]

Hi,

Did you use HTML5 repository service on CF?

[vvdries]

I just found a nice blog about the approuter and caching:

https://blogs.sap.com/2019/08/23/sapui5-sessions-and-logout-fine-grained-control-of-approuter-cachin...

Maybe this can help?

It is the caching part (cacheControl) in the xs-app.json of the approuter:

{
        "source": "^/index.html$",
        "localDir": "resources",
        "authenticationType": "xsuaa",
        "cacheControl": "no-cache"
}

What I do see is that you already have placed it into your xs-app.json the cacheControl.

But maybe you can try by providing a final route if non of the other patterns match?

So adding a * all route with the no-cache?

[zje8szh]

Really thank you for looking into this issue.

I found that there are two cases here.

1. Index page or home page is located in folder of app router (not my case)

It works with the following setting.

"cacheControl": "no-cache"

The whole configuration of xs-app.json

{
"welcomeFile": "/index.html",               // index.html
"logout": {
"logoutEndpoint": "/do/logout",
"logoutPage": "/logout.html"
 },
"authenticationMethod": "route",
"routes": [
 {
"source": "^/backend/(.*)$",
"target": "$1",
"destination": "service",
"authenticationType": "xsuaa"
 },
 {
"source": "^/logout.html$",
"localDir": "resources",
"authenticationType": "none",
"cacheControl": "no-cache",
"csrfProtection": false
 },
 {
"source": "^/frontend/(.*)$",
"target": "$1",
"destination": "frontend",
"authenticationType": "xsuaa",
"cacheControl": "no-cache"
 },
 {
"source": "^/index.html$",
"localDir": "resources",                 // local directory of app router
"authenticationType": "xsuaa",
"cacheControl": "no-cache"
 }
 ]
}

2. Home page is located in the frontend application(my case)

It does not work with the settings.

"cacheControl": "no-cache"

In this case, the welcome file is "/frontend/" which is mapped to frontend application in route section. It will open the home page of frontend application.

{
    "welcomeFile": "/frontend/",          // frontend url
    "logout": {
        "logoutEndpoint": "/do/logout",
        "logoutPage": "/logout.html"
    },
    "authenticationMethod": "route",
    "routes": [
        {
            "source": "^/backend/(.*)$",
            "target": "$1",
            "destination": "service",
            "authenticationType": "xsuaa"
        },
        {
            "source": "^/logout.html$",
            "localDir": "resources",
            "authenticationType": "none",
            "cacheControl": "no-cache",
            "csrfProtection": false 
        },
        {
            "source": "^/frontend/(.*)$",           // Target to frontend application
            "target": "$1",
            "destination": "frontend",
            "authenticationType": "xsuaa",
            "cacheControl": "no-cache"
        }
    ]
}

We need to find a solution for case 2.

[former_member662960]

Hi Dries,

I'm also having the same problem. I have the same configuration as suggested here, but unfortunetly If I try to navigate all my session information is preserved.

[vvdries]

Hi Luisa,

I'm not sure if my answers provided the solution for this issue.

But like Jerry mentioned he solved the issue by using the HTML5 repository in his SAP UI5 Application and by configuring the "cacheControl" property accordingly.

Hopefully this will help you as well.

Best regards,

Dries

[vvdries]

Hi Jerry,

Sorry to hear it did not help.

Maybe you can try something like this. It worked for me.

{
"welcomeFile":"/cp.portal",
"authenticationMethod":"route",
"logout":{
"logoutEndpoint":"/do/logout",
"logoutPage":"/logout.html"
},
"routes":[{
"source":"^/logout.html(.*)$",
"target":"logoff.html$1",
"localDir":"./static/",
"authenticationType":"none",
"csrfProtection":false
},

You will only need to foresee a static folder inside your app router with inside a logoff.html file.

Then you should be redirected after logout to the logoff page. No more "cache" issue I would say.

Maybe you can give it a try?

Kind regards,

Dries

[zje8szh]

It still did not work in my case. Thank you very much anyway.

If I open application in incognito window in chrome, I will be redirected to login page. I guess the home page is somehow cached by brower. When I access it again, the cached page would be displayed.

[vvdries]

Hi Jerry,

Maybe this would be to easy to be the fix, but did you try to set the logout like this? do

"logout": {
		"logoutEndpoint": "/do/logout",
		"logoutPage": "/logout.html"
	}

Kind regards,

Dries

[zje8szh]

Thank you for your response. But it did not fix this issue.