Получить изменение URL в угловых

Question

У меня два разных проекта.

Проект аутентификации: имеет хост как http://localhost:4200 Здесь у меня будет страница входа, где пользователь будет вводить данные длявойдите в систему.

После успешного входа пользователь будет перенаправлен в другой проект с именем Application.

Проект приложения: имеет хост как http://localhost:8000

Таким образом, если пользователь вошел в систему успешно, он будет находиться здесь на панели инструментов, как страница http://localhost:8000/dashboard в этом проекте приложения.

С этим сценарием все в порядке.

Предположим, если пользователь входил в http://localhost:8000/dashboard напрямую, тогда мне нужно, чтобы он перенаправил на http://localhost:4200 для входа.

Поскольку без входа пользователь не может перейти к этому проекту http://localhost:8000/dashboard напрямую.Вещи, связанные с охраной, были сделаны, и все работало должным образом.

Вещество, в котором я нуждаюсь , - это если пользователь дает URL-адрес в виде http://localhost:8000/users (примечание url: users ) непосредственно тогда он придет, чтобы войти на страницу, и после входа мне нужно перенаправить на тот же URL , откуда он пришел.

ТАК сценарий - пользователь вводит URL вручную какhttp://localhost:8000/users но он не вошел в систему и поэтому он был перенаправлен на страницу входа, после успешного входа он был перенаправлен на http://localhost:8000/, но мне нужно перенаправить его на http://localhost:8000/users, потому что это место, где онпришел.

Как получить URL, откуда он пришел?

Я использую угловые 7 приложений.

Answer 1

Вот что мы делаем:

В AuthGuard

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

if (this.isAuthorized) {
  return true;
}

// not logged in so redirect to login page with the return url
console.log("navigating to login page with return url: "+ state.url);
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
  }

И затем при входе в систему мы перенаправляем их обратно на returnUrl

Answer 2

В вашем Auth Guard вы можете сохранить предыдущий URL;перенаправьте cx на страницу входа, если cx не был зарегистрирован.как только пользователь успешно вошел в систему, проверьте, есть ли какой-либо URL setRedirect в службе, если да, перенаправьте на эту страницу, иначе перенаправьте на страницу по умолчанию.

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): boolean {
    const url: string = state.url;
    if (this.loginService.isUserLoggedIn()) {
        return true;
    }
    this.loginService.setRedirectUrl(url);
    this.loginService.redirectToLogin();
    return false;
}

loginService.ts

setRedirectUrl(url: string): void {
    localStorage.setItem('state', url);
}

После того, как пользователь вошел в систему, проверьте, есть ли какой-либо ключ состояния в локальном хранилище, если да, перенаправьте на этот URL, иначе перенаправьте на страницу по умолчанию.Надеюсь, это поможет

Answer 3

вы можете создать угловую службу, например службу перенаправления, и она имеет логический флаг и URL-адрес перенаправления, и когда пользователь вводит URL-адрес в методе ngOnInit, вы устанавливаете флаг в значение true и используете модуль маршрутизатора для получения URL-адреса и проверки страницы входа в систему.флаг и перенаправление после входа в систему

Answer 4

Добавьте исходный URL-адрес в качестве параметра GET для перенаправления с localhost: 8000 / users на localhost: 4200.Что-то вроде localhost: 4200? Url =% 2Fusers

На странице входа вы проверяете, задан ли параметр.Если он установлен, вы перенаправляете на localhost: 8000 / users, иначе вы перенаправляете на localhost по умолчанию: 8000 / dashboard

В этом примере показано, как перенаправить

let currentUrl;
// get current url, e.g. currentUrl = "/users"
// or currentUrl = window.location.pathname
window.location.href = "http://localhost:4200?url=" + encodeURIComponent(currentUrl);

Не забудьте использовать decodeURIComponent длядекодировать URL.

Параметры запроса можно прочитать с помощью

1. Угловой

   this.activatedRoute.queryParams.subscribe(params => {
       const url = decodeURIComponent(params['url']);
       console.log(url);
   });
   

2. VanillaJs

   let urlParam = window.location.search.substr(1).split("&").map(function(el) {return el.split("=");}).find(function(el) {return el[0] === "url";})
   let url = urlParam ? decodeURIComponent(urlParam[1]) : "";
   

3. VanillaJs

   URLSearchParams

4. VanillaJs

   Url.searchParams