前言
在Angular项目中，界面跳转是在所难免的事情，而跳转界面最基础的就是用户的登录与登出操作。
比如我们经营一个社交网站，首先是要允许持有合法credentials的用户登录，用户可以用自己的账号发表动态，与他人交流；其次当用户在编辑自己的动态过程中不小心点到了返回，退出登录，浏览器的后退...可能我们就需要善意的提醒一下，您可是还有未保存的修改。
于是针对以上两种情况：
- 什么人可以访问，我们使用
canActivate - 是么时候可以退出访问，我们使用
canDeactivate
前要：Angular的Router
如果你使用过angular-cli的话，app.module.ts和app.routing.module这两个文件相信都比较熟悉，app.module.ts这里不多说，你项目的declarations，imports还有providers等等都得在这里引入好先，当然，也包括了这个app.routing.modul。
一般来说，我们的aap.routing.module的写法都比较统一
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
...
const routes: Routes = [
{
path: '/login',
component: '...',
canActivate: [AuthGuard],
},
{
path: 'logout',
component: '...',
canDeactivate: [UnsavedGuard],
}
...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {
}
很容易理解，我们把整个项目的路由路径以及他对应的组件都写进了一个routes数组，在app.module.ts里面引用后，就可以根据对应的路径访问对应的界面。
我们来仔细看一下Routes这个Route[]的东西是个啥样子，它可以有哪些参数呢：
interface Route {
path?: string
pathMatch?: string
matcher?: UrlMatcher
component?: Type<any>
redirectTo?: string
outlet?: string
canActivate?: any[]
canActivateChild?: any[]
canDeactivate?: any[]
canLoad?: any[]
data?: Data
resolve?: ResolveData
children?: Routes
loadChildren?: LoadChildren
runGuardsAndResolvers?: RunGuardsAndResolvers
}
关于Route的详细内容可以查看官网的文档Angular/Router。从上可以看到，我们的主人公canActivate和canDeactivate就是在每个Route的声明的时候给加上的。具体怎么操作，我们继续往下看。
前门：访问许可canActivate
我们先来看angular对canActivate的注释：
An array of dependency-injection tokens used to look up `CanActivate()` handlers, in order to determine if the current user is allowed to activate the component. By default, any user can activate.
简单来说，我们在创建一个Route的时候默认所有人都可以访问，但是有些机密的东西，不是每个人都可以看到的，所以要加一个看门人canActivate来给我们把关，它呢需要你给他制定一个规则，你把这个规则制订好作为一个数组传给他就大功告成了。
而我们的主要工作就是制定一个符合你的业余需求的门禁规则，它需要继承canActivate接口，其定义如下：
interface CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}
我们来一个例子，我们网站上有个人主页，但是个人主页访问的前提是你得成功登录了，所以这里可以对个人主页这个界面请一个AuthGuard，代码如下：
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { of } from 'rxjs';
import { AuthService } from '....'
export class AuthGuard implements CanActivate {
constructor(private router: Router, private auth: AuthService) {
}
// 复写canActivate方法
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.auth.isLoggedIn();
}
}
很简单的验证，自己写一个对auth对验证服务，然后这里引入进行验证就ok，记住它需要返回的是一个observable或者Promise，对应的方法也应该如此，这里对于canActivate返回true即允许访问，false反之。
然后最后一步加入到你的route中：
{
path: 'userIndex/:userId',
component: 'UserIndexComponent',
canActivate: [AuthGuard],
}
Well done，现在你的用户主页就需要通过你制定的登录验证才能访问了。
后门：离开许可canDeactivate
正如上文说到的，如果一个用户在编辑页面内容的过程中想要跳转到其他界面，那么他当前做出的更改应该如何处理呢？我们给他直接保存或是不丢弃感觉都不太make sense，所以大部分做法是提示用户有未保存的更改，他自己决定是否要放弃保存离开界面或是继续编辑。
因此这个离开界面的时候我们就可以安排一个后门守门员LeaveGuard来帮我们提醒准备离开的人，他同样需呀继承canDeactivate接口，其定义如下：
interface CanDeactivate<T> {
canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}
注意：
canDeactivate的第一个参数是component，这个参数就是你需要进行退出验证的组件。
举个例子，用户在修改自己的个人资料的时候，忘了点保存就点到了界面中的返回按钮，那么这个时候我们LeaveGuard的代码如下：
leave.guard.ts
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { UserDetailComponent } from '../user-detail.component';
import { of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LeaveGuard implements CanDeactivate<UserDetailComponent> {
public canDeactivate(component: UserDetailComponent): Observable<boolean> {
if (component.onPageLeaving && typeof(component.onPageLeaving) === 'function') {
return component.onPageLeaving();
} else {
return of(true);
}
}
}
user-detail.component
...
public onPageLeaving(): Observable<boolean> {
// if the form has been edited
if (this.formGroup.dirty) {
// may be you can come up an alert for user first
...
if (yes) { return of(true); }
else { return of(false); }
} else {
return of(true);
}
}
// be careful, you need to update the form to be Pristine after updated
public updateFile() {
...
this.formGroup.markAsPristine();
}
...
同样，最后在你的route中加入：
{
path: 'userDetail/:userId',
component: 'UserDetailComponent',
canDeactivate: [LeaveGuard],
}
在代码中提示了一点，就是说我们每当文档被修改后，即dirty === true了，我们就需要去提醒用户是否要继续跳转，而当用户更新了这个文件后，我们应该重新把这个文件标记为Pristine，这样就不会发现生为哈我保存了还是dirty的情况。
至此，我们的后门门卫也就安排好了。
提醒一下
有些时候我们经常在界面的上方固定一个控制面板(Dashboard)，而通过这个控制面板可以直接的退出登录，那么在这个地方我们要特别注意一下，deActivate和canActivate的触发都是基于route的改变，一般来说就是使用了navigate或者navagateByUrl，redirect之类的方法改变了你的当前所在路由。
经常我们对于logout()方法主要做两件事：
- 删除用户当前的登录信息 => token for example;
- 刷新界面/返回登录界面
那么我们可以看到，当我们点击了登出按钮，后台就会删除用户的登录信息，那么即使我们界面被后门门卫不让走，但是实际上我们的数据已经没了，甚至你可以看到界面里被动态加载后数据空空如也，这个时候即使你不离开界面，你的所有操作也都没法实现了。
因此针对这个问题的出现，有一个我采用的方法就是，额外增加一个logout.component。就是说用户点击登出按钮也不会理解登出，而是首先会跳转到logout界面，这个界面可以是一个短暂的加载界面，因为往往来说，登出也是需要后台的一次response，所以一个简单的loading界面也不会显得很奇怪，同时最大的改善就是我们会第一时间就触发我们的门卫机制，防止了登出操作的错误进行。
当然，如果你有更好的方法，有更多的问题，欢迎讨论。
至此，本文完结。
