时间戳

首页 > 解决方案 > 使用 Authguard 重定向到上一页

angular - 使用 Authguard 重定向到上一页

问题描述

我想实现重定向功能，如果用户登录，则用户需要转到上一页前... Page A ----> Login (susccess) ' PageA<----- 我通过实现来做到这一点路由器事件订阅方法，但问题是加载页面时路由器事件不会触发，因此我的经理建议我使用 authguard，在那里我获取上一页的 URL，但如何实现它，一旦我得到前一个 URL，我我正在存储和发送从登录到更远位置的 URL，基本上我需要登录组件上的前一个 URL。

以下是示例 auth guard ：

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

import {
  LocalStorageService
} from 'ngx-webstorage';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  userSessionId: string | null = null;
  URLPath: string | undefined;
  constructor(private router: Router, private storage: LocalStorageService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {


    // not logged in so redirect to login page with the return url

    this.URLPath = this.router.url.substring(
      0,
      this.router.url.lastIndexOf('/')
    );
    debugger
    console.log(state.url, "previous **************url*********");
    this.router.navigate([this.URLPath + '/login'], {
      queryParams: {
        returnUrl: state.url
      },
    });
    return false;
  }
}

在上面获取上一个 URL 的控制台中，我面临的第一个问题是 auth guard 正在使用可以激活状态，在这种状态下，只有少数需要会话令牌的页面才能访问它，这与 CANLoad 相同。

下面是routing.ts

{
  path: 'services',
  loadChildren: () =>
    import ('../services/services.module').then((m) => m.ServicesModule),
  canActivate: [AuthGuard],
}, {
  path: 'select-employee/:serviceId',
  loadChildren: () =>
    import ('../employee/employee.module').then((m) => m.EmployeeModule),
  canActivate: [AuthGuard],
}, {
  path: 'appointments',
  loadChildren: () =>
    import ('../appointments/appointments.module').then(
      (m) => m.AppointmentsModule
    ),
  canActivate: [AuthGuard],
}, {
  path: 'review',
  loadChildren: () =>
    import ('../review/review.module').then((m) => m.ReviewModule),
  canLoad: [CanLoadReviewGuard],
  canActivate: [AuthGuard],
}, {
  path: 'bookings',
  loadChildren: () =>
    import ('../bookings/bookings.module').then((m) => m.BookingsModule)
}, {
  path: 'login',
  loadChildren: () =>
    import ('src/app/authentication/login/login.module').then((m) => m.LoginModule)
},

在上面的几个组件中已经实现了 auth guard 我想我不能创建新的，如果是这样我实现了 authguard 如何在登录组件中获取 state.url？

请帮助我长期以来一直陷入这个问题

标签： angular

解决方案

您将前一个 URL 作为“returnURL”查询参数传递给登录路由。您将在浏览器地址栏中看到这一点。

这是您的代码的摘录。

this.router.navigate([this.URLPath + '/login'], {
      queryParams: {
        returnUrl: state.url
      },
    });

在登录组件中，您可以访问查询参数

constructor(route: ActivatedRoute) {
....
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] 
}

登录成功后，您可以使用此 returnUrl 进行导航

this.router.navigate([this.returnUrl]);

推荐阅读