angular - 在 AuthGuard 中获取先前的路由/url

问题描述

有时用户可能会访问我的页面而无需在当前设备上登录。对于这种情况，我有一个AuthGuard检查用户是否登录的检查。如果没有，它会被重定向到/login页面。

现在，有时我需要在用户登录后将其移动到特定页面。此外，查询参数需要像这样移动：

@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();
  }    
}

对于路线：

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

现在，我没有找到其他方法来获取先前的 URL。这个解决方案的问题是在执行previousUrl时没有设置，canActivate()这意味着previousUrl总是undefined在那个时候。

如何在AuthGuard获取控制权之前获取上一个 URL？

我已经看过了

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

在我重定向到之前/login

但是_router.url已经 */login并且url快照只是一个空列表[]。

标签： angulartypescript

将原始 URL 传递给登录组件：

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;
    }
}

见这里：https ://jasonwatmore.com/post/2016/12/08/angular-2-redirect-to-previous-url-after-login-with-auth-guard

编辑：

如果没有，它会被重定向到 /login 页面。

这是您将获取当前页面并使用守卫作为参数传递给登录组件的地方

angular - 在 AuthGuard 中获取先前的路由/url

问题描述

解决方案

推荐阅读