Question

我有两个不同的项目。

身份验证项目：主持人为http://localhost:4200 我将在这里有一个登录页面，用户将在其中输入登录详细信息。

成功登录后，用户将被定向到另一个名为Application的项目。

应用项目：主持人为http://localhost:8000

因此，如果用户成功登录，他将位于此应用程序项目的http://localhost:8000/dashboard页面等仪表板中。

在这种情况下，一切正常。

假设，如果用户直接输入http://localhost:8000/dashboard，那么我需要他重定向到http://localhost:4200进行登录。

由于未登录，用户无法直接进入此项目http://localhost:8000/dashboard。进行了与Auth Guard相关的工作，一切正常。

我需要的是，如果用户直接将URL设置为http://localhost:8000/users（注意URL是用户），那么他将开始登录页面和登录后，我需要重定向到他来自的相同网址。

因此，该场景是用户以http://localhost:8000/users手动输入url，但他未登录，因此他被重定向到登录，然后成功登录后，他被重定向到http://localhost:8000/，但是我需要将他重定向到http://localhost:8000/users，因为那是他来自的地方。

如何获取他来自的网址？

我正在使用angular 7应用程序。

Answer 1

将原始URL作为GET参数添加到从localhost：8000 / users到localhost：4200的重定向中。像localhost：4200？url =％2Fusers

在登录页面上，检查是否设置了参数。如果已设置，您将重定向到localhost：8000 /用户，否则您将重定向到默认的localhost：8000 /仪表板

此示例显示了如何重定向

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

请记住使用decodeURIComponent对网址进行解码。

您可以使用读取查询参数

角度

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

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]) : "";

VanillaJs

URLSearchParams
VanillaJs

Url.searchParams

Answer 2

在您的Auth Guard中，您可以保存以前的URL；如果未登录cx，则将cx重定向到登录页面。用户成功登录后，检查服务中是否有任何setRedirect URL，如果是，则重定向到该页面，否则重定向到默认页面。

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

您可以创建一个角度服务，例如重定向服务，它具有一个布尔标志并重定向网址当用户输入网址时在ngOnInit方法中，将标志设置为true并使用路由器模块获取url 并在登录页面上检查标志并在登录后重定向

Answer 4

这就是我们要做的：

在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

获取角度的URL更改

4 个答案: