Node.js+Angular中如何阻止未登录或非管理员访问admin.html？

这种情况我碰到过好几次，大概率是前端校验没兜底、后端没拦截静态资源请求或者会话校验逻辑有漏洞导致的。咱们分前后端两步来彻底解决：

一、后端Node.js：必须做兜底校验（核心！） #

前端的任何校验都能被绕过，所以后端必须拦截所有访问admin.html的请求，先校验用户身份。假设你用Express框架：

1. 拦截静态资源请求 #

如果你的admin.html放在静态资源目录（比如public/），默认Express的express.static会直接返回文件，绕过你的会话校验。所以要先在static中间件前加拦截逻辑：

const express = require('express');
const app = express();

// 先拦截/admin.html的请求
app.get('/admin.html', (req, res, next) => {
  // 校验会话：假设你用express-session，用户信息存在req.session.user里
  if (!req.session.user || req.session.user.role !== 'admin') {
    // 未登录或非管理员，重定向到登录页
    return res.redirect('/login.html');
  }
  // 校验通过，继续走静态资源逻辑
  next();
});

// 再托管静态资源
app.use(express.static('public'));

// 其他路由...
app.listen(3000);

2. 检查会话逻辑是否正确 #

• 确认登录时是否正确将用户角色存入session：比如登录接口里要写req.session.user = { id: xxx, role: 'admin' }
• 确认session配置正确（比如secret、resave、saveUninitialized参数没写错）
• 测试时可以在拦截器里打印req.session.user，看是否能正确获取到用户信息

二、前端Angular：路由守卫强化体验 #

前端路由守卫可以防止用户通过Angular路由跳转访问管理页，但不能阻止直接输入URL（这时候还是靠后端）。配置步骤：

1. 创建AdminGuard守卫 #

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AdminGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    const currentUser = this.authService.getCurrentUser();
    // 这里的AuthService建议调用后端接口校验用户身份（不要只依赖localStorage，易被篡改）
    if (currentUser && currentUser.role === 'admin') {
      return true;
    }
    // 未授权，跳转到登录页
    this.router.navigate(['/login']);
    return false;
  }
}

2. 在路由配置中使用守卫 #

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

const routes: Routes = [
  { 
    path: 'admin', 
    component: AdminComponent,
    canActivate: [AdminGuard] // 绑定守卫
  },
  // 其他路由...
];

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

3. 关键提醒：前端不要依赖localStorage存角色 #

很多人图省事把用户角色存在localStorage里，但这很容易被篡改。正确的做法是：前端每次需要校验身份时，调用后端的/api/check-auth接口，由后端返回当前用户的真实角色。

三、排查之前方案失效的常见原因 #

1. 后端没拦截静态资源：如果admin.html是静态文件，express.static会直接返回，你的会话校验代码可能写在了static中间件之后，导致没生效
2. 会话校验逻辑错误：比如判断role时写成了== 'Admin'（大小写错误），或者session没正确初始化
3. 前端路由守卫没覆盖所有入口：比如admin路由有多个子路由，没给子路由也加守卫
4. 浏览器缓存：有时候浏览器会缓存admin.html，测试时要清空缓存或者用无痕模式访问

按照这个流程来，应该就能彻底阻止未授权用户访问admin页面了。

内容的提问来源于stack exchange，提问作者Viktor Gnativ