Javascript 在Angular 2应用程序的同一会话中重新登录时加载最后一个活动组件

现在在我的Angular 2应用程序中，我正在成功地处理登录和注销。我还使用

ActivatedRoute

和

queryParams

在用户注销时重新加载所有上次加载的组件，然后在同一会话中重新登录。登录组件如下所示：

ngOnInit()
{
    // reset login status
    this.authenticationService.logout();

    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}

login(response)
{
    this.loading = true;
    this.authenticationService.login(this.model.username, this.model.password)
        .subscribe(
            data =>
            {
                this.router.navigate(['returnUrl']);
                this.reset();
            },
            error =>
            {
                this.alertService.error(error, response);
                this.loading = false;
            });
    this.authenticationService.username = this.model.username;
}

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], data: {contentId: 'dashboard'} },

{ path: 'about', component: AboutComponent, canActivate: [AuthGuard], data: {contentId: 'about'} },

{ path: 'login', component: LoginComponent },

{ path: '**', redirectTo: 'dashboard' }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{
    // Get route content id
    let contentId = Object.getPropertyValueAtPath(route, 'data.contentId');

    //If route does not have session id, don’t load in tab view
    if (!String.isNotNullOrEmpty(contentId))
    {
        console.error(`Route (${route.routeConfig.path}) does not have a content id.`);
        this.router.navigateByUrl(''); // Forward to default page.
        return false;
    }

    if (this.disabled)return true;

    if (localStorage.getItem('currentUser'))
    {
        // logged in so return true
        return true;
    }

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

我想处理的唯一调整是，如果加载了三个选项卡/组件，当用户注销然后重新登录时，我想加载最后一个活动选项卡作为新的活动选项卡

现在，我们在应用程序路由文件中使用AuthGuard和重定向，在成功登录后的所有情况下重定向到仪表板组件。因此，这可以处理用户进入未知路由的情况，以及用户首次登录或在同一会话中再次登录的情况。应用程序路由文件如下所示：

ngOnInit()
{
    // reset login status
    this.authenticationService.logout();

    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}

login(response)
{
    this.loading = true;
    this.authenticationService.login(this.model.username, this.model.password)
        .subscribe(
            data =>
            {
                this.router.navigate(['returnUrl']);
                this.reset();
            },
            error =>
            {
                this.alertService.error(error, response);
                this.loading = false;
            });
    this.authenticationService.username = this.model.username;
}

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], data: {contentId: 'dashboard'} },

{ path: 'about', component: AboutComponent, canActivate: [AuthGuard], data: {contentId: 'about'} },

{ path: 'login', component: LoginComponent },

{ path: '**', redirectTo: 'dashboard' }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{
    // Get route content id
    let contentId = Object.getPropertyValueAtPath(route, 'data.contentId');

    //If route does not have session id, don’t load in tab view
    if (!String.isNotNullOrEmpty(contentId))
    {
        console.error(`Route (${route.routeConfig.path}) does not have a content id.`);
        this.router.navigateByUrl(''); // Forward to default page.
        return false;
    }

    if (this.disabled)return true;

    if (localStorage.getItem('currentUser'))
    {
        // logged in so return true
        return true;
    }

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

以下是我的authenticationService中的相关代码：

login(username: string, password: string)
{
    const u = encodeURIComponent(username);
    const p = encodeURIComponent(password);
    return this.http.post(this.url + this.ver + '/' + 'customers/login/' + u + '/' + p + '?' + this.key, {})
        .map((response: Response) =>
        {
            // login successfully if there's a 200 response
            const user = response.json();
            // if (user && user.token) {
            if (user && (response.status = 200))
            {
                localStorage.setItem('currentUser', JSON.stringify(user));
                console.log('User ' + this.username + ' successfully authenticated with API');

                // Track active user id
                this._userId = user.data._id;

                // Trigger login change
                this.change.emit(this);
            } else
            {
                console.log('User ' + this.username + ' not recognized by API');
            }
        });
}

isAuthenticated()
{
    if (localStorage.getItem('currentUser'))
    {
        return true;
    } else
    {
        return false;
    }
}

logout()
{
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');
    console.log('User successfully logged out');

    // Reset active user
    this._userId = undefined;

    // Trigger event
    this.change.emit(this);
}

我的AuthGuard文件如下所示：

ngOnInit()
{
    // reset login status
    this.authenticationService.logout();

    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}

login(response)
{
    this.loading = true;
    this.authenticationService.login(this.model.username, this.model.password)
        .subscribe(
            data =>
            {
                this.router.navigate(['returnUrl']);
                this.reset();
            },
            error =>
            {
                this.alertService.error(error, response);
                this.loading = false;
            });
    this.authenticationService.username = this.model.username;
}

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], data: {contentId: 'dashboard'} },

{ path: 'about', component: AboutComponent, canActivate: [AuthGuard], data: {contentId: 'about'} },

{ path: 'login', component: LoginComponent },

{ path: '**', redirectTo: 'dashboard' }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{
    // Get route content id
    let contentId = Object.getPropertyValueAtPath(route, 'data.contentId');

    //If route does not have session id, don’t load in tab view
    if (!String.isNotNullOrEmpty(contentId))
    {
        console.error(`Route (${route.routeConfig.path}) does not have a content id.`);
        this.router.navigateByUrl(''); // Forward to default page.
        return false;
    }

    if (this.disabled)return true;

    if (localStorage.getItem('currentUser'))
    {
        // logged in so return true
        return true;
    }

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

但是我想做的是加载最后一个活动的选项卡/组件，而不是每次只加载仪表板组件。我将如何处理这种期望的行为？Angular中的路由是否允许我在这里设置一个set a conditional子句，而不是始终默认加载一个默认组件

我还想到，我可能可以这样做的一种方法是，在注销之前，通过

window.location.pathname

记录完整的url路径。然后我需要将该值传递回

login（）

函数。仍在试图找出如何做到这一点，同时通过以下方式获取所有打开的选项卡/组件：

this.returnUrl=this.route.snapshot.queryParams['returnUrl']| |'/