Angular2-成功登录后重定向到调用URL [英] Angular2 - Redirect to calling url after successful login

问题描述

我已经在Angular 2.1.0中启动并运行了我的应用程序. 路由通过路由器Guards canActivate保护.

I have my application up and running with Angular 2.1.0. The routes are protected via router Guards, canActivate.

将浏览器指向"localhost:8080/customers"之类的受保护区域时，我像预期的那样重定向到我的登录页面.

When pointing the browser to a protected area like "localhost:8080/customers" I get redirected to my login page just like expected.

但是成功登录后，我想重定向回调用URL(在这种情况下为"/customers").

But after a successful login, I would like to be redirected back to calling URL ("/customers" in this case).

用于处理登录的代码如下

The code for handling the login looks like this

login(event, username, password) {
  event.preventDefault();
  var success = this.loginService.login(username, password);
  if (success) {
    console.log(this.router);
    this.router.navigate(['']);
  } else {
    console.log("Login failed, display error to user");
  }
}

问题是，我不知道如何从登录方法内部获取调用网址.

The problem is, I don't know how to get a hold of the calling url from inside the login method.

我确实找到了一个与此有关的问题(和答案)，但实际上并没有任何意义. 登录后Angular2重定向

I did find a question (and answer) regarding this but couldn't really make any sense of it. Angular2 Redirect After Login

推荐答案

Angular Docs中有一个很好的例子，

There's a great example in the Angular Docs, Teach Authguard To Authenticate. Basically the idea is using your AuthGuard to check for your login status and store the url on your AuthService. Some of the code is on the url above.

AuthGuard

import { Injectable }       from '@angular/core';
import {
  CanActivate, Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
}                           from '@angular/router';
import { AuthService }      from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn) { return true; }

    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;

    // Navigate to the login page with extras
    this.router.navigate(['/login']);
    return false;
  }
}

AuthService 或您的LoginService

AuthService or your LoginService

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
  isLoggedIn: boolean = false;    
  // store the URL so we can redirect after logging in
  public redirectUrl: string;

  constructor (
   private http: Http,
   private router: Router
  ) {}

  login(username, password): Observable<boolean> {
    const body = {
      username,
      password
    };
    return this.http.post('api/login', JSON.stringify(body)).map((res: Response) => {
      // do whatever with your response
      this.isLoggedIn = true;
      if (this.redirectUrl) {
        this.router.navigate([this.redirectUrl]);
        this.redirectUrl = null;
      }
    }
  }

  logout(): void {
    this.isLoggedIn = false;
  }
}

我认为这可以让您了解事情的工作原理，当然您可能需要适应您的代码

I think this will give an idea how things work, of course you probably need to adapt to your code

这篇关于Angular2-成功登录后重定向到调用URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！