Question

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

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，所以我无法实现它。

Answer 1

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

导航到另一个页面预览以打开登录并挂起您正在导航的页面。
拥有一个接受登录组件的模态服务，并向路线警卫返回一个承诺或可观察的。
在应用程序级别拥有登录模式，并从路由保护程序中打开它。

我认为你的目标应该是向守卫提供一个承诺，即当被解决时会知道用户是否重新登录。

希望这有帮助

CanActivate with Modal / selector

1 个答案: