對於未登入的使用者,無法訪問其他模組,當點選其他功能模組時跳轉到登入介面

在app-routing.modle.js中加入攔截

const routes: Routes = [
  {
    path: '**', component: ***,
    canActivate: [LoginGuard]
  }
 ]

具體攔截功能實現

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
 
;
import { LocalStorage } from '../common/local.storage';

@Injectable()
export class LoginGuard implements CanActivate {
    constructor(private router: Router, private store: LocalStorage) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let isLogin: boolean
 
;
        // 判斷使用者是否登入
        const user = this.store.getObject('user');
        if (JSON.stringify(user) === '{}') {
            isLogin = false;
            // 未登入跳轉到登入介面
            this.router.navigateByUrl('/login');
        } else {
            isLogin = true;
        }
        return isLogin;
    }
}