angular 路由守卫

完整的代码, 可以复制引用

进入时候的守卫

创建LoginGuard/login.guard.ts

import { CanActivate, Router } from "@angular/router";
import { Injectable } from "@angular/core";
import { NzModalService } from 'ng-zorro-antd';
import { ToolService } from "../../tool/tool.service";

@Injectable()
export class LoginGuard implements CanActivate {
    public isLogin: boolean = false;
    public ulits: any = new ToolService;

    // 构造函数
    constructor(
        public rouetr: Router,
        private modalService: NzModalService
    ) {}

    // 守卫判断逻辑
    canActivate() {
        let user = this.ulits.storage.get('user');
        if (user && user.data) {
            this.isLogin = true;
        } else {
            this.modalService.error({
                nzTitle: '提示',
                nzContent: '请先登录 !'
            });
            this.rouetr.navigate(['/login']);
        }
        return this.isLogin;
    }
}

然后在app-routing.module.ts

import { LoginGuard } from './LoginGuard/login.guard';
// import { CanActivate } from '@angular/router/src/utils/preactivation';

const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, canActivate: [LoginGuard]},
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: 'home' }
];

@NgModule({
providers: [LoginGuard]
})