0

I have google it and read multiple article to find out the solution to redirect UI page in the browser to another page from backend service. I have not got what I am looking for so putting this question in the hope, I will get the solution. :)

My Requirement: I have below three service running on three different port as below:

appA developed in angular running on http://localhost:4000

loginPage developed in angular running on http://localhost:4200

authorization server developed in Golang running on http://locahost:8080

I have launched application appA in browser and then click on login button which is redirecting to applicaiton loginPage. now on loginPage, user is providing credential and on button click, angular is internally making http call to authorization server to validate the user.

After successful credential validation, authorization service(rest endpoint) is redirecting that loginPage to application appA home page at the browser side.

Problem

After successful credential validation, authorization service is redirecting loginPage to application appA home page, I can see this in the browser network tab but browser page is not reloading on the redirected url.

My requirement is to load the redirected url on the browser.

Question Below are my question:

  1. Is it possible to redirect browser url from one point to another or not.
  2. If yes, please let me know the solution. I have tried the httpInterceptor approach in the angular. Here also, we are reloading page with angular code instead of happening from backend side. So this is not what i am looking for.
  3. If not, then how other places they have achieved it.

For example: I want to login to makeMytrip application using google account. there we redirected to google login page and after the authentication, google redirect back to the makeMytrip home page.

NOTE:

OAuth2 protocol is completely based on it. how they achieved it.

I don't also want to use form submit approach which has it's own limitation.

As this scenario is used in multiple places in real world. Please help me find the right accepted solution instead of workaround or hack kind of approach.

Rohit
  • 406
  • 1
  • 5
  • 21

1 Answers1

0

Letting an API redirect a frontend is kind of a weird/unusual thing to do.

Browsers won't automatically follow the redirect, but you can read the Location header of the response object manually and manually update document.href.

Evert
  • 93,428
  • 18
  • 118
  • 189
  • Thanks Evert for your response. But I am not able to intercept redirected url. Even I use http interceptor in angular, still doesn't work. Http Interceptor is only able to catch response of redirected url. After that I don't want to reload the page. it should happened in first call. – Rohit Aug 04 '21 at 07:44
  • `fetch()` has an option to set whether you want to follow redirects or not. You will want to disable this so you can process the redirect manually. Do you have this option in Angular? – Evert Aug 04 '21 at 15:40
  • I have tried fetch() approach as well, Still same issue. fetch(URL, { method: 'GET', redirect: 'follow'}): Redirection is happening but not reloading the page on redirected URL. fetch(URL, { method: 'GET', redirect: 'manual'}): Automatic redirection is not happening in the UI side on the redirected URL. But there is also not way to find out in UI side what is the redirected URL where backend has forwarded to. – Rohit Aug 06 '21 at 05:33
  • Ref link: https://stackoverflow.com/questions/52666207/response-headers-not-available-for-fetch-request-with-redirect-manual – Rohit Aug 06 '21 at 05:55