如何使用CanActive/ CanDeactive路由保护来限制用户在登录Angular 6后返回打开未经授权的页面

CanActive/CanDeactive路由保护是Angular框架提供的一种机制，用于限制用户在登录后返回打开未经授权的页面。通过使用这种路由保护，我们可以在用户尝试访问某个路由之前进行权限验证，以确保用户有权访问该路由。

在Angular 6中，我们可以通过以下步骤来使用CanActive/CanDeactive路由保护：

创建一个名为AuthGuard的路由守卫服务。可以使用Angular CLI生成一个新的服务文件，命令为：ng generate service auth-guard。
在AuthGuard服务中，实现CanActivate接口（用于限制用户访问某个路由）和CanDeactivate接口（用于限制用户离开某个路由）。
在CanActivate接口的canActivate方法中，我们可以编写逻辑来验证用户是否已登录或是否具有访问该路由的权限。如果验证失败，可以重定向用户到登录页面或其他适当的处理方式。
在CanDeactivate接口的canDeactivate方法中，我们可以编写逻辑来验证用户是否可以离开当前路由。例如，我们可以询问用户是否保存了未提交的表单数据，如果用户选择不保存，则可以允许用户离开路由。
在路由配置中，将AuthGuard服务应用到需要进行权限验证的路由上。可以使用canActivate属性来指定CanActivate接口的实现类，使用canDeactivate属性来指定CanDeactivate接口的实现类。

以下是一个示例代码：

// auth-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanDeactivate<any> {

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 在这里进行权限验证逻辑，返回true表示允许访问路由，返回false表示禁止访问路由
    return true;
  }

  canDeactivate(
    component: any,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 在这里进行离开路由验证逻辑，返回true表示允许离开路由，返回false表示禁止离开路由
    return true;
  }
}

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth-guard.service';

const routes: Routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard], canDeactivate: [AuthGuard] },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上述示例中，AuthGuard服务实现了CanActivate和CanDeactivate接口，并在路由配置中应用到了需要进行权限验证的路由上。你可以根据具体需求，自定义CanActivate和CanDeactivate方法中的逻辑。

对于CanActive/CanDeactive路由保护的应用场景，它可以用于限制用户在登录后访问特定页面，或者在离开某个页面时进行确认操作。例如，在一个需要用户登录的应用中，我们可以使用CanActivate来限制用户在未登录状态下访问个人资料页面，使用CanDeactivate来询问用户是否保存了未提交的表单数据。

腾讯云提供了一系列与Angular相关的产品和服务，例如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务信息。

请注意，以上答案仅供参考，具体实现方式和产品选择应根据实际需求和情况进行调整。