Angular 6中ngx admin（nebular auth）服务端会话过期重定向咨询

好的，咱们来一步步解决你遇到的这个问题～首先明确说：Nebular Auth本身提供了路由守卫来检查登录状态，但针对后端会话过期导致的API 401错误，默认并没有自动处理的机制，需要咱们手动添加全局HTTP拦截器来捕获这个错误并触发登出跳转。下面是具体的实现步骤：

1. 确认启用Nebular的路由守卫保护页面 #

ngx-admin集成Nebular Auth后，默认提供了NbAuthGuard，可以用来保护需要登录才能访问的路由。你需要在路由配置中给受保护的页面添加这个守卫，这样如果前端检测到未登录状态，会直接跳转到登录页。

比如在你的主路由配置文件（比如app-routing.module.ts）中：

import { NbAuthGuard } from '@nebular/auth';

const routes: Routes = [
  {
    path: 'pages',
    canActivate: [NbAuthGuard], // 保护pages下的所有子路由
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.NbAuthModule),
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

这个守卫会检查Nebular Auth本地存储的登录状态，但如果后端会话已经过期但前端本地状态还没更新，就会出现你说的“能导航页面但API返回401”的情况，这时候就需要下面的HTTP拦截器来处理。

2. 添加全局HTTP拦截器捕获401错误 #

当后端Laravel的会话过期，API返回401未授权时，我们需要在前端全局捕获这个错误，然后触发Nebular的登出操作，清除本地登录状态并跳转到登录页。

步骤1：创建Auth拦截器 #

在你的项目中新建一个拦截器文件，比如auth.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { NbAuthService } from '@nebular/auth';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: NbAuthService, private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        // 捕获401未授权错误
        if (error.status === 401) {
          // 调用Nebular的登出方法，清除本地认证状态
          this.authService.logout('email').subscribe(() => {
            // 跳转到登录页
            this.router.navigate(['auth/login']);
          });
        }
        return throwError(error);
      })
    );
  }
}

这里的'email'是你Nebular Auth配置的认证策略名称，如果你用的是其他策略（比如'password'），记得替换成对应的名称。

步骤2：注册拦截器 #

在app.module.ts中注册这个拦截器，让它生效：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor'; // 替换成你的文件路径

@NgModule({
  declarations: [AppComponent],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true, // 允许多个拦截器存在
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

3. 针对Laravel Session认证的额外说明 #

如果你的Laravel用的是Session认证而不是JWT，需要确保前端请求带上Laravel的Session Cookie（Angular默认会自动带上同域的Cookie），同时Nebular Auth的本地状态要和后端Session保持同步。这时候拦截器的401处理依然有效，因为只要后端返回401，就说明Session已经过期，前端触发登出即可。

总结 #

• NbAuthGuard负责前端路由层面的登录状态检查，防止未登录用户直接访问受保护页面；
• 全局HTTP拦截器负责捕获后端返回的401错误，触发登出并跳转登录页，解决后端会话过期但前端状态未更新的问题。

这样配置后，下次用户长时间无操作导致Laravel会话过期时，只要前端发起API请求，就会自动跳转到登录页，不会再出现页面无数据的情况啦～

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