获取 url 的角度变化

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 是 users），那么他将来到登录页面并登录后，我需要重定向到他来自的相同的网址。

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

如何获取他来自的url？

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

Answer 1

将原始 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

Answer 2

在 Your 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

您可以创建一个角度服务，例如重定向服务，它有一个布尔标志 并重定向网址 当用户输入一个 url 在 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