要保护用户详细信息并在Angular应用中实施JWT令牌和NgRx，可以按照以下步骤进行：

1. 添加JWT令牌认证：

   • 在后端实现JWT认证和生成令牌的逻辑。
   • 在登录接口中，验证用户的凭据，并生成JWT令牌。
   • 在每个需要保护用户信息的请求中，将JWT令牌添加到请求头中。

2. 创建一个AuthService：

   • 创建一个AuthService，用于处理用户认证和令牌相关的逻辑。
   • 在AuthService中，实现登录和注销功能，并保存用户令牌和其他用户信息。
   • 使用Angular的HttpClient发送登录请求，并在成功登录后保存令牌。

3. 创建一个AuthGuard：

   • 创建一个AuthGuard，用于保护需要认证的路由。
   • 在AuthGuard中，检查用户是否已登录并且令牌是否有效。
   • 如果用户未登录或令牌无效，导航到登录页面。

4. 创建一个UserActions：

   • 创建一个UserActions，用于处理用户信息的NgRx操作。
   • 创建一个action来保存用户信息，例如SaveUser。
   • 创建一个reducer来处理SaveUser action，并更新用户信息的状态。

5. 在AppComponent中加载用户信息：

   • 在AppComponent的构造函数中注入AuthService和Store。
   • 在ngOnInit生命周期钩子中，订阅用户信息的状态，并在用户信息发生变化时更新本地变量。

下面是一个简单的代码示例：

auth.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class AuthService {
  private apiUrl = 'http://example.com/api/auth';

  constructor(private http: HttpClient, private store: Store) {}

  login(credentials: any): Observable {
    return this.http.post(`${this.apiUrl}/login`, credentials).pipe(
      tap((res: any) => {
        // 保存用户令牌和其他信息到本地存储
        localStorage.setItem('token', res.token);
        this.store.dispatch(new SaveUser(res.user));
      })
    );
  }

  logout() {
    // 删除本地存储的令牌和用户信息
    localStorage.removeItem('token');
    this.store.dispatch(new SaveUser(null));
  }
}

auth.guard.ts:

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

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

  canActivate(): boolean {
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

user.actions.ts:

import { Action } from '@ngrx/store';

export const SAVE_USER = '[User] Save User';

export class SaveUser implements Action {
  readonly type = SAVE_USER;

  constructor(public payload: any) {}
}

export type UserActions = SaveUser;

user.reducer.ts:

import { UserActions, SAVE_USER } from './user.actions';

export interface UserState {
  user: any;
}

const initialState: UserState = {
  user: null
};

export function userReducer(state = initialState, action: UserActions) {
  switch (action.type) {
    case SAVE_USER:
      return {
        ...state,
        user: action.payload
      };
    default:
      return state;
  }
}

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  template: `
    
Hello, {{ user.name }}!
    
  `
})
export class AppComponent implements OnInit {
  user: any;

  constructor(private authService: AuthService, private store: Store) {}

  ngOnInit() {
    this.store.select('user').subscribe(userState => {
      this.user = userState.user;
    });
  }
}

这是一个简单的示例，用于保护用户详细信息并在