要保护管理员路由并防止从Firebase获取UID,可以使用Angular的守卫(guard)和Firebase的身份验证。
首先,创建一个名为admin.guard.ts
的守卫文件,并在其中实现所需的逻辑。以下是一个示例代码:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { map, take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AdminGuard implements CanActivate {
constructor(private router: Router, private afAuth: AngularFireAuth) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {
return this.afAuth.user.pipe(
take(1),
map(user => {
if (user && user.uid === 'your-admin-uid') { // 将 'your-admin-uid' 替换为你的管理员UID
return true;
} else {
// 重定向到其他页面,如登录页面或访客页面
return this.router.parseUrl('/login');
}
})
);
}
}
接下来,在你的路由模块中使用该守卫来保护管理员路由。以下是一个示例代码:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminGuard } from './admin.guard';
const routes: Routes = [
{
path: 'admin',
canActivate: [AdminGuard],
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
},
// 其他路由配置...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上述示例中,canActivate
属性将AdminGuard
作为路由守卫。只有当用户是管理员时,才允许访问/admin
路径。
最后,确保在你的模板中为管理员操作显示相应的链接。以下是一个简单的示例:
在上述示例中,使用了isAdmin
变量来控制是否显示管理员链接,你可以根据自己的需求进行调整。
这是使用Angular和Firebase保护管理员路由并防止从Firebase获取UID的基本解决方案。你可以根据自己的需求进行修改和扩展。