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 { }