Docker容器中Angular路由AuthGuard失效问题求助

将Angular项目部署至Docker容器后，本地通过localhost:4200访问（容器内部监听80端口）。项目使用Angular路由及AuthGuard校验登录状态，本地用Angular CLI运行时功能正常：未登录访问受保护路由会跳转至登录页，但部署到Docker容器后，未登录访问localhost:4200/Home/Posts这类受保护路由时，浏览器直接返回404错误，而非跳转至登录页。

相关代码及配置如下：

路由配置 #

const routes: Routes = [
  { path: 'Login', component: LandingPageComponent},
  { path: '', component: AppComponent},
  { path: 'Home', component: BlogHomeComponent, canActivate:[AuthGuard],
  children:[ 
    { path: '', component: BlogHomeComponent},
    { path: "Posts", component: PostsComponent},
    { path: 'NewPost', component: CreatePostComponent},
    { path: 'Post/:id', component: SinglePostComponent}
]}
];

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

AuthGuard代码 #

@Injectable({
  providedIn: 'root'
})
export class AuthGuard  {

constructor(private authService: AuthService, private route: Router){}

  canActivate():boolean {
    if(this.authService.isLoggedIn() == true){
      return true;
    } else {
      this.route.navigateByUrl("");
      return false;
    }
  }
}

Dockerfile #

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod

FROM nginx:alpine
COPY --from=node /app/dist/front-end-blog-demo /usr/share/nginx/html

Docker-compose配置 #

version: "3.8"
services:
  frontend:
    build: ./FrontEnd-BlogDemo
    ports:
      - 4200:80
  backend:
    build: ./BackEnd-BlogDemo
    ports:
      - 8080:80

这是Nginx默认配置不支持Angular前端路由导致的：

• Angular是单页应用（SPA），所有路由逻辑都在前端处理，只有一个入口文件index.html。
• 本地Angular CLI的开发服务器会自动把所有路由请求转发到index.html，让Angular路由接管处理，所以AuthGuard能正常工作。
• 但Nginx默认会根据请求路径去查找对应的静态文件，当直接访问/Home/Posts这类深层路由时，Nginx找不到对应的文件，直接返回404错误，根本没机会让Angular的AuthGuard执行跳转逻辑。

需要修改Nginx配置，让所有请求都转发到index.html，具体操作如下：

• 在前端项目根目录创建Nginx配置文件nginx.conf，内容如下：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理所有路由请求，转发到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
}

• 修改Dockerfile，将自定义的Nginx配置复制到容器中替换默认配置：

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod

FROM nginx:alpine
# 复制自定义Nginx配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=node /app/dist/front-end-blog-demo /usr/share/nginx/html

• 重新构建并启动Docker容器：

docker-compose down
docker-compose build
docker-compose up -d

这样修改后，Nginx会把所有请求都转发到index.html，Angular路由就能正常接管，AuthGuard也会生效，未登录访问受保护路由时会正确跳转到登录页。

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