angular - Lấy route/url trước đó trong AuthGuard

Đôi khi một người dùng có thể truy cập trang của tôi mà không đăng nhập trên thiết bị hiện tại. Trong trường hợp đó, tôi có một AuthGuard kiểm tra xem người dùng có đăng nhập hay không. Nếu không, họ sẽ bị chuyển hướng đến trang /login.

Bây giờ, đôi khi tôi cần người dùng được chuyển đến một trang cụ thể sau khi họ đăng nhập. Ngoài ra, các tham số truy vấn cũng cần được chuyển tiếp như sau:

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {

  private previousUrl: string;

  constructor(
    private _userService: UserService,
    private _router: Router,
    private _activatedRoute: ActivatedRoute,
    private _logger: NGXLogger
  ) {

    this._router.events
      .subscribe((event) => {
        this.previousUrl = null;    
        if (event instanceof NavigationCancel) {
          this.previousUrl = event.url;
        }
      });
  }

  canActivate() {

    console.log('canActivate')
    if (AuthenticationService.isLoggedIn()) {
      this._logger.debug('User is logged in.');
      return true;
    }

    let loginParams = {};

    if (this.previousUrl) {

      const url = this._activatedRoute.snapshot.url;
      const queryParams = this._activatedRoute.snapshot.queryParams;

      const paramsList = [];
      for (const k of Object.keys(queryParams)) {
        paramsList.push(`${k}=${queryParams[k]}`);
      }

      const paramsStr = paramsList.length ? `?${paramsList.join('=')}` : '';
      const enc = encodeURIComponent(`${this.previousUrl}${paramsStr}`);

      loginParams = {redirect: enc};
    }

    this._router.navigate(['/login'], {queryParams: loginParams});

    return false;
  }

  canActivateChild() {
    return this.canActivate();
  }    
}

cho các tuyến đường:

{
  path: '',
  loadChildren: './module/application/application.module#ApplicationModule',
  canActivate: [AuthGuard]
},

Bây giờ, tôi không tìm thấy cách nào khác để có được URL trước đó. Vấn đề với giải pháp này là previousUrl không được thiết lập vào thời điểm canActivate() được thực thi, có nghĩa là previousUrl luôn luôn là undefined vào thời điểm đó.

Làm thế nào tôi có thể lấy URL trước đó trước khi AuthGuard kiểm soát?

Tôi đã xem rồi

console.log(this._router.url);
console.log(this._activatedRoute.snapshot.url);

trước khi tôi chuyển hướng đến /login

nhưng _router.url *đã là /login và bản chụp url chỉ là một danh sách rỗng [].

Câu trả lời #1

Chuyển URL gốc cho thành phần đăng nhập:

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

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

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

Xem tại đây: https://jasonwatmore.com/post/2016/12/08/angular-2-redirect-to-previous-url-after-login-with-auth-guard

Chỉnh sửa :

Nếu không, nó sẽ được chuyển hướng đến trang /login.

Đây là nơi bạn sẽ lấy trang hiện tại và sử dụng guard để chuyển làm tham số cho thành phần đăng nhập