系統中路由想要被訪問,需要先通過路由守衛驗證,看當前用戶是否登錄:
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 { }