Angular单用户认证实现：保护/admin路由及AdminOverview组件

Hey there! Since you're working with Angular and Firebase, you don't need any extra heavy frameworks for this single-user admin access requirement—Angular's built-in route guards paired with Firebase Auth will do the trick perfectly, and it's super straightforward to set up. Let's walk through this step by step:

1. Prerequisite: Set Up Firebase Auth #

First, make sure you have Firebase Auth configured in your Angular app (if you haven't already). Enable email/password authentication in the Firebase Console, create the single admin user account there, and note down their UID or email—you'll need this later.

2. Create an Admin Route Guard #

Angular's CanActivate guard is exactly what you need to control access to the /admin route. Generate a guard using the Angular CLI:

ng generate guard auth/admin

Open the generated admin.guard.ts file and update it to check if the current logged-in user matches your specified admin:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { map, take } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanActivate {
  // Pull the admin UID from your environment file (never hardcode in production!)
  private readonly ADMIN_UID = environment.adminUid;

  constructor(
    private afAuth: AngularFireAuth,
    private router: Router
  ) {}

  canActivate() {
    return this.afAuth.authState.pipe(
      take(1), // Only take the latest auth state to avoid memory leaks
      map(user => {
        // Check if the user exists AND matches the admin UID
        if (user && user.uid === this.ADMIN_UID) {
          return true; // Allow access to /admin
        } else {
          // Redirect non-admin users (or logged-out users) to the home page
          this.router.navigate(['/']);
          return false;
        }
      })
    );
  }
}

3. Update Your Environment File #

Add the admin UID to your environment.ts (and environment.prod.ts for production) to keep it secure and configurable:

export const environment = {
  production: false,
  firebase: {
    // Your existing Firebase config here
  },
  adminUid: 'paste-your-admin-user-uid-here'
};

4. Configure the /admin Route with the Guard #

Open your app-routing.module.ts and attach the AdminGuard to the /admin route:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminOverviewComponent } from './admin-overview/admin-overview.component';
import { AdminGuard } from './auth/admin.guard';

const routes: Routes = [
  // Your other public routes go here...
  {
    path: 'admin',
    component: AdminOverviewComponent,
    canActivate: [AdminGuard] // This ensures only the admin can access the route
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

5. Load Firebase Data in AdminOverview Component #

Since the guard already ensures only the admin can reach this component, you can safely load your Firebase data here using AngularFirestore or AngularFireDatabase:

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-admin-overview',
  templateUrl: './admin-overview.component.html',
  styleUrls: ['./admin-overview.component.css']
})
export class AdminOverviewComponent implements OnInit {
  adminData$: any;

  constructor(private firestore: AngularFirestore) {}

  ngOnInit(): void {
    // Example: Load a collection from Firestore
    this.adminData$ = this.firestore.collection('your-admin-collection').valueChanges();
  }
}

Quick Notes #

• How to get the admin UID? Go to the Firebase Console → Authentication → Users, find your admin user, and copy their UID.
• Handling logins: Since your site doesn't have a link to /admin, the admin user will need to log in first (you can add a hidden login page or use Firebase's built-in login UI) before accessing /admin.
• Security: Even with the route guard, set up Firebase Security Rules to restrict access to your admin data only to the admin UID—route guards are client-side, so server-side rules are essential for true security.

内容的提问来源于stack exchange，提问作者Burst of Ice