Angular：路由守衛AuthGuardProvider中的checkLogin驗證登錄狀態

系統中路由想要被訪問，需要先通過路由守衛驗證，看當前用戶是否登錄：

AuthGuardProvider路由守衛服務：

/*
 * @Author: Wangcan
 * @Date: 2018-05-16 13:34:23
 * @Last Modified by: Wangcan
 * @Last Modified time: 2019-08-17 15:46:20
 * @Description:
 *      路由守衛，沒有登錄認證通過無法訪問內部頁面
 */
import { Injectable } from '@angular/core';
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  CanActivateChild,
  CanLoad,
  Route
} from '@angular/router';
import { AuthProvider } from './auth-provider';

@Injectable()
export class AuthGuardProvider implements CanActivate, CanActivateChild, CanLoad {
  constructor(
    private authService: AuthProvider,
    private router: Router,
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.checkLogin(route);
  }

  // 子級路由是否能夠訪問
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }

  canLoad(route: Route): boolean {
    return this.checkLogin(route);
  }


  // 驗證是否登錄
  private checkLogin(route: any): boolean {
    const bool = this.authService.checkAuth();
    if (!bool) {
      this.router.navigate(['/login']);
    }
    return bool;
  }
}

上面我們在checkLogin方法中，調用了來自authService的驗證登錄的方法：

/**
   * 檢查權限
   */
  checkAuth(): boolean {
    if (this.tokenProvider.isAuth) {
      return true;
    }
    return false;
  }

isAuth方法是獲取系統token認證的有效性：

/**
   * 系統token認證的有效性
   */
  get isAuth() {
    this._isAuth =
      !helper.IsEmpty(this.token_read()) &&
      !helper.IsEmpty(this.globalData.tokenInfo);
    return this._isAuth;
  }

  set isAuth(bool) {
    this._isAuth = bool;
  }

}

-----------------------------------------------------------------------------------------------------------------------------------

路由守衛的使用：

在app-routing.module.ts文件中，作爲服務引入：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuardProvider } from './providers/common/auth/auth-guard.provider';

/**
 * 路由配置
 */
export const appRoutes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' }, //  默認路由
  {
    path: 'login',
    loadChildren: 'app/pages/login/login.module#LoginModule',
  },
  {
    path: 'xcmg',
    loadChildren: 'app/pages/main/main.module#MainModule',
  },
  { path: '**', redirectTo: 'login' },    //  無效URL
];




@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { useHash: false })],
  exports: [RouterModule],
  providers: [AuthGuardProvider]         // 引入路由守衛，對路由做驗證
})
export class AppRoutingModule { }