Angular基于路由权限限制组件间跳转

Angular中利用canActive（路由守卫功能）限制路由跳转

---

使用angular作为前端框架时，通过路由实现组件之间跳转，很多时候都需要对组件的访问作权限拦截。比如某些页面（组件）登录后才能访问，某些页面需要特殊权限（角色）才能访问。我们后台需要根据用户身份进行数据拦截，Angular也需要对路由跳转进行拦截。下面我用一个拦截登录的例子简单介绍一下该功能。

1.创建一个自己的服务组件用于验证用户是否登录

// src/app/user/login-auth.service.ts
import { Injectable } from '@angular/core';
import { Http,Headers,RequestOptions } from '@angular/http';

@Injectable()
export class LoginAuthService {
  private headers = new Headers({'Content-Type': 'application/json;'});
  private options = new RequestOptions({ headers: this.headers });
  constructor(private http:Http ){ }
  // 是否登录
  public isLogin(): boolean {
    const token = localStorage.getItem('token');
    // Check whether the token is expired and return
    // true or false
    return !this.isTokenExpired(token);
  }

  //利用http请求判断用户是否登录或token是否过期
  private isTokenExpired(token:string):boolean{
      ...
      this.http.get....
      ...

      return isTokenExpired
  }
}

2.创建路由验证服务，实现CanActivate接口

// src/app/user/auth.service.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { LoginAuthService } from './login-auth.service';

@Injectable()
export class AuthService implements CanActivate {

  constructor(public router: Router,private loginAuth:LoginAuthService) {}

  canActivate(): boolean {
      if(!this.loginAuth.isLogin()){
          this.router.navigate(['login']);
          return false;
      }
       return true;
  }

}

3.路由列表中对需要登录才能访问的路径下加上canActive

import { Routes } from '@angular/router';
import { AuthService } from './user/auth.service';

export const ROUTES: Routes = [
    ...
    {
        path: 'personal/:id',
        component: PersonalComponent,
        canActivate: [AuthService]
    },
    ...
]

4.最后别忘了在AppModule的providers加入服务组件

@NgModule({
  declarations: [
      PersonalComponent
   ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
  ],
  providers: [AuthService,LoginAuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

这只是一个简单登录拦截例子，如果有复杂的角色身份认证，使用这个方式都一样可以实现。无非定义不同的验证服务，根据当前用户身份进行匹配。
如果还想详细了解路由守卫功能，可通过官网详细了解，链接如下：
https://angular.cn/guide/router#milestone-5-route-guards