1

我目前正在研究应用程序的身份验证服务。该服务使用后端生成的令牌。就像现在一样，如果令牌过期，它将把用户重定向到登录页面；但是，我想实现一个解决方案，它不会重定向用户，而是调用登录模式，用户将在其中放置其信息。这是当前代码的片段。

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthenticationService } from './authentication.service';

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

    canActivate() {
        try {
            if (this.authenticationService.loggedIn()) {
                return true;
            }
        } catch (error) {
            console.log(error);
        }
        this.router.navigate(['/login']);
        return false;
    }
}

我有另一个带有登录模式的组件。

@Component({
    selector: 'login-modal',
    templateUrl: './login-modal.component.html',
    styles: []
 })

基本上我想要做的是将使用更改为this.router.navigate(['/login']),LoginModalComponent和selector: 'login-modal'. 如何更改CanActivate方法以调用LoginModalComponent？

我看到了一个使用 Bootstrap 4 的解决方案；但是，我的应用程序使用 Bootstrap 3，所以我无法实现它。

4

1 回答 1

1

您有几个选择，但这里有一些建议：

  • 导航到另一个页面期望打开登录并挂在您正在导航的页面上。
  • 有一个模式服务，它接收登录组件并向路由守卫返回一个承诺或可观察的。
  • 在应用程序级别拥有登录模式和从路由守卫打开它的服务。

我认为您的目标应该是向守卫提供一个承诺，即在解决后将知道用户是否重新登录。

希望这可以帮助

于 2017-10-23T17:41:40.050 回答