Angular2-成功登录后重定向到调用url

我已经用Angular 2.1.0启动并运行了我的应用程序。 路由通过路由器防护装置canActivate进行保护

当将浏览器指向“localhost:8080/customers”这样的受保护区域时，我会像预期的那样重定向到登录页面

但在成功登录后，我希望被重定向回调用URL（本例中为“/customers”）

处理登录的代码如下所示

登录（事件、用户名、密码）{
event.preventDefault（）；
var success=this.loginService.login（用户名、密码）；
如果（成功）{
console.log（this.router）；
这个.router.navigate（['']）；
}否则{
log（“登录失败，向用户显示错误”）；
}
}

问题是，我不知道如何从登录方法中获取调用url

我确实找到了一个关于这个的问题（和答案），但我真的没有任何意义。

---

角度文档中有一个教程。实现这一点的一种可能方法是使用AuthGuard检查登录状态并将url存储在AuthService上

AuthGuard

从'@angular/core'导入{Injectable}；
进口{
激活，路由器，
激活的路由快照，
路由器状态快照
}来自“@angular/router”；
从“/auth.service”导入{AuthService}；
@可注射（）
导出类AuthGuard实现了CanActivate{
构造函数（私有authService:authService，私有路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：布尔值{
让url:string=state.url；
返回这个.checkLogin（url）；
}
checkLogin（url:string）：布尔值{
if（this.authService.isLoggedIn）{return true；}
//存储尝试重定向的URL
this.authService.redirectUrl=url；
//导航到带有附加功能的登录页面
this.router.navigate（['/login']）；
返回false；
}
}

AuthService或您的登录服务

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从'@angular/Router'导入{Router}；
@可注射（）
导出类身份验证服务{
isLoggedIn:boolean=false；
//存储URL，以便我们可以在登录后重定向
公共重定向URL:字符串；
建造师(
私有http:http，
专用路由器
) {}
登录（用户名、密码）：可观察{
常数体={
用户名，
密码
};
返回此.http.post（'api/login'，JSON.stringify（body））.map（（res:Response）=>{
//对你的回答做什么都行
this.isLoggedIn=true；
if（this.redirectUrl）{
this.router.navigate（[this.redirectUrl]）；
this.redirectUrl=null；
}
}
}
注销（）：void{
this.isLoggedIn=false；
}
}

---

我想这会让你了解事情是如何运作的，当然你可能需要适应你的代码

这段代码会处理你的请求：

导出类AuthGuard实现CanActivate{
构造函数（私有authService:authService，
专用路由器（路由器）{
}
canActivate（下一步：ActivatedRouteSnapshot，
状态：RouterStateSnapshot）：可观察{
返回此文件。authService.isVerified
.采取（1）
.map（（已验证：布尔）=>{
如果（！已验证）{
this.router.navigate（['/login']，{queryParams:{returnUrl:state.url}}）；
返回false；
//返回true；
}
返回true；
});
}
}

我看到的答案是正确的。 但是回答您的问题的最好方法是

returnUrl

。 像这样：

export class AuthGuardService implements CanActivate {

  constructor(private auth: AuthenticationService, private router: Router) { }

  canActivate(next: ActivatedRouteSnapshot,
    _state: import('@angular/router').RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    let isLoggedIn = false;
    const idToken = next && next.queryParamMap.get('id_token');
    try {
      const expiresAt = idToken && JSON.parse(window.atob(idToken.split('.')[1])).exp * 1000;
      if (idToken && expiresAt) {
        isLoggedIn = true;
        localStorage.setItem('id_token', idToken);
        localStorage.setItem('expires_at', String(expiresAt));
      } else {
        isLoggedIn = this.auth.isLoggedIn();
      }
    } catch (e) {
      console.error(e);
      isLoggedIn = this.auth.isLoggedIn();
    }
    if (!isLoggedIn) {
      //this section is important for you:
      this.router.navigate(['/login'], { queryParams: { returnUrl: _state.url }});
    }
    return isLoggedIn;
  }
}

导出类AuthGuardService实现CanActivate{
构造函数（私有身份验证：AuthenticationService，私有路由器：路由器）{}
canActivate（下一步：ActivatedRouteSnapshot，
_状态：导入（'@angular/router'）。RouterStateSnashot）：可观察的|承诺|布尔值{
设isLoggedIn=false；
const idToken=next&&next.queryParamMap.get（'id_-token'）；
试一试{
const expiresAt=idToken&&JSON.parse（window.atob（idToken.split（'.'）[1]））.exp*1000；
如果（idToken&&expiresAt）{
isLoggedIn=真；
setItem（'id_token'，idToken）；
setItem（'expires_at'，String（expiresAt））；
}否则{
isLoggedIn=this.auth.isLoggedIn（）；
}
}捕获（e）{
控制台错误（e）；
isLoggedIn=this.auth.isLoggedIn（）；
}
如果（！isLoggedIn）{
//本节对您很重要：
这个.router.navigate（['/login']，{queryParams:{returnUrl:_state.url}}）；
}
返回伊斯洛格丁；
}
}

这将创建一个类似于param的带有returnUrl的url，现在您可以从param读取returnUrl

---

祝你好运。

我真的需要马上休息一下。我已经在angular.io上读了很多次了，错过了这么一个明显的例子……无论如何，非常感谢，这真的起到了作用：）我确实找到了另一种解决方案，使用相同的方式存储window.location.pathname，但您提供的解决方案似乎更像是一种有角度的方式。@AndersBergquist我知道这种感觉，我总是一遍又一遍地阅读文档，学习新知识things@FabioAntunes我在上面的示例中看到，您没有使用任何特定的存储，即本地存储或其他（我不确定是否真的建议使用它）。当页面刷新时，

isLoggedIn

将为false，

api/login

将再次调用重定向。您是否建议以安全的方式处理刷新。为什么要刷新页面？另外，

isLogged

in只是一个布尔值。在一个真正的应用程序中，你必须做一些更像是做一个api调用来检查应用程序何时启动，如果用户已经登录，然后在每个api请求中，如果我们得到401，确保我们将用户重定向到登录页面或类似的东西