1. 初始化angular項目

1.1 創建angular項目

需要安裝npm和nodejs，這邊不在重新安裝
直接安裝最新版本的angular

npm install -g @angular/cli

安裝指定大版本的angular

npm install -g @angular/cli@18

1.2 啟動angular

使用idea啟動

控制臺啟動

ng serve

啟動成功后的情況

1.2.1 特殊情況，angular啟動后localhost和ip都無法訪問

在啟動腳本里加–host 0.0.0.0后，就可以用ip訪問，為啥localhost不行，沒找到解決方案

1.3 清理自帶的首頁信息

<style>
</style><main class="main"></main>
<router-outlet />

1.4 創建home和login

ng generate component admin/home
ng generate component admin/login

1.5 添加全局絕對路徑

在tsconfig.json添加代碼

   {"compilerOptions": {"baseUrl": "./","paths": {"@app/*": ["src/app/*"]}}}

可以直接用@app 前綴來引用服務

2. 創建身份驗證服務

2.1 身份驗證服務

在根目錄下執行創建身份驗證服務的代碼
用來保存用戶登錄狀態

ng generate service base/authService/auth

修改auth.service.ts

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class AuthService {private isLoggedIn = false;constructor() { }login() {this.isLoggedIn = true;}logout() {this.isLoggedIn = false;}isAuthenticated(): boolean {return this.isLoggedIn;}
}

2.2 路由守衛服務

在根目錄下執行創建路由守衛服務的代碼
用于檢查用戶是否已登錄。如果用戶未登錄，則重定向到登錄頁面。

ng generate service base/authService/authGuard

修改authGuard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';@Injectable({providedIn: 'root'
})
export class AuthGuard implements CanActivate {constructor(private authService: AuthService, private router: Router) { }canActivate(): boolean {if (this.authService.isAuthenticated()) {return true;} else {this.router.navigate(['/login']);return false;}}
}

2.3 配置路由app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './admin/home/home.component';
import { LoginComponent } from './admin/login/login.component';
import {AuthGuard} from './base/authService/auth-guard.service';
export const routes: Routes = [{ path: '', component: HomeComponent, canActivate: [AuthGuard] },{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },{ path: 'login', component: LoginComponent },{ path: '**', redirectTo: '', pathMatch: 'full' } ,// 添加通配符路由,訪問不存在的路徑時重定向到主頁
];

2.4 更新 app.config.server.ts （如果有的話，18不需要添加）

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import {AuthGuard} from './base/authService/auth-guard.service';const serverConfig: ApplicationConfig = {providers: [provideServerRendering(),AuthGuard]
};export const config = mergeApplicationConfig(appConfig, serverConfig);

2.5 在login里添加登錄事件

編輯login.component.ts文件

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@app/base/authService/auth.service';
@Component({selector: 'app-login',imports: [],templateUrl: './login.component.html',styleUrl: './login.component.css'
})
export class LoginComponent {constructor(private authService: AuthService, private router: Router) { }login() {this.authService.login();this.router.navigate(['/']);}
}

在login.component.html添加登錄按鈕

<button (click)="login()">Login</button>

點擊登錄后直接跳轉到指定頁面

3.