如何构建带CAS认证的Angular 5 + Node.js应用？前端鉴权跳转咨询

Alright, let's tackle this problem since you're working with Angular 5 on the frontend and Node.js with r-cas-authentication + express-session on the backend. Here's a step-by-step approach to handle authentication checks and redirects properly:

1. First: Add a Backend Endpoint to Expose Auth Status #

Since your user session lives on the backend (stored in express-session), the frontend can't directly access it. You'll need to create a lightweight endpoint that tells the frontend whether the user is authenticated, and returns basic user info if they are.

First, make sure to exclude this endpoint from CAS authentication (so unauthenticated users can still check their status without being redirected):

// Node.js/Express CAS setup
const cas = require('r-cas-authentication')({
  cas_url: 'https://your-cas-server-domain.com/cas',
  service_url: 'http://your-app-domain.com',
  // Exclude the status check route from CAS intercept
  ignore: ['/api/auth/status']
});

Then add the status endpoint:

// Auth status route
app.get('/api/auth/status', (req, res) => {
  // Check if the CAS user exists in the session (field name may vary per r-cas-authentication docs)
  if (req.session && req.session.cas_user) {
    res.json({
      isAuthenticated: true,
      user: req.session.cas_user // Return user details if needed
    });
  } else {
    res.json({ isAuthenticated: false });
  }
});

2. Angular Frontend: Create an Auth Service to Check Status #

Build a reusable Angular service to call the backend status endpoint. This will be used across your app to verify auth state:

// src/app/auth/auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {}

  // Fetch auth status from backend
  checkAuthStatus(): Observable<{ isAuthenticated: boolean, user?: any }> {
    return this.http.get<{ isAuthenticated: boolean, user?: any }>('/api/auth/status');
  }
}

3. Protect Routes with an Angular Route Guard #

Use Angular's CanActivate guard to protect routes that require authentication. If the user isn't logged in, we'll redirect them to the backend's CAS login route (the backend handles the actual CAS redirect, since CAS needs to generate a valid service ticket tied to your app):

// src/app/auth/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.checkAuthStatus()
      .take(1)
      .map(status => {
        if (status.isAuthenticated) {
          // User is logged in, allow access to the route
          return true;
        } else {
          // Redirect to backend's CAS login endpoint (backend handles CAS redirect)
          window.location.href = '/api/auth/login';
          return false;
        }
      });
  }
}

Then apply this guard to your protected routes in the routing module:

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth/auth.guard';

const routes: Routes = [
  { 
    path: 'dashboard', 
    component: DashboardComponent, 
    canActivate: [AuthGuard] // Protect this route
  },
  // Add other protected routes here with the same guard
];

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

4. Configure Backend CAS Login/Logout Routes #

Set up the backend routes to handle CAS login (redirect unauthenticated users to CAS) and logout (clear session and redirect to CAS logout):

// CAS login route - bounces unauthenticated users to CAS
app.get('/api/auth/login', cas.bounce, (req, res) => {
  // After successful CAS auth, redirect back to the frontend's home/protected route
  res.redirect('/dashboard');
});

// CAS logout route - clears session and redirects to CAS logout page
app.get('/api/auth/logout', cas.logout, (req, res) => {
  // After CAS logout, redirect back to frontend home
  res.redirect('/');
});

5. Bonus: Initial Auth Check on App Load #

To check auth status when the app first loads (e.g., to show/hide login/logout buttons), call the checkAuthStatus() method in your root component:

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  isLoggedIn = false;
  user: any;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.checkAuthStatus().subscribe(status => {
      this.isLoggedIn = status.isAuthenticated;
      this.user = status.user;
    });
  }
}

Important Notes #

• Double-check the session field name for CAS user data: r-cas-authentication might store user info in req.session.cas instead of req.session.cas_user—refer to the module's docs to confirm.
• If your frontend and backend are on different domains, configure CORS on your Express server and ensure express-session cookies are set with appropriate sameSite and httpOnly flags (e.g., sameSite: 'lax' for cross-domain HTTPS).

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