系统中路由想要被访问,需要先通过路由守卫验证,看当前用户是否登录:
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 { }