Angular 5中ngx-permissions页面刷新丢失权限，如何避免？

我之前在Angular项目里用ngx-permissions时也踩过这个坑——页面一刷新，所有权限就清空了。本质原因很简单：Angular应用刷新后会完全重启，内存里的权限状态自然就没了。要解决这个问题，核心思路就是把权限持久化存储，下面是几个实用的解决方案：

方法一：用ngx-permissions内置的持久化配置 #

ngx-permissions本身提供了持久化权限的配置项，不用自己写太多代码就能搞定：

在你的AppModule中导入NgxPermissionsModule时，通过forRoot()配置存储策略：

import { NgxPermissionsModule, PermissionStrategy } from 'ngx-permissions';

@NgModule({
  imports: [
    // 其他模块...
    NgxPermissionsModule.forRoot({
      permissionStrategy: PermissionStrategy.PERSIST, // 开启持久化
      storage: 'localStorage' // 可选值：'localStorage' 或 'sessionStorage'
    })
  ]
})
export class AppModule { }

这样配置后，ngx-permissions会自动把权限存到你指定的存储中，页面刷新时会自动读取并加载权限，完全不用手动处理存储逻辑。

方法二：手动实现权限的持久化（更灵活） #

如果内置配置满足不了你的需求（比如需要自定义存储逻辑），可以手动实现权限的存储和加载：

1. 存储权限 #

当你从后端获取到用户权限后，除了加载权限，还要把它存到本地存储：

import { NgxPermissionsService } from 'ngx-permissions';

constructor(private permissionsService: NgxPermissionsService) {}

loadUserPermissions() {
  // 模拟从后端获取权限数组
  const userPermissions = ['edit_post', 'delete_post', 'view_dashboard'];
  
  // 加载权限到ngx-permissions
  this.permissionsService.loadPermissions(userPermissions);
  
  // 存到localStorage
  localStorage.setItem('app_user_permissions', JSON.stringify(userPermissions));
}

2. 页面刷新后加载权限 #

在应用启动时（比如AppComponent的ngOnInit里，或者用APP_INITIALIZER确保启动前加载），读取存储的权限并加载：

// 在AppComponent中
ngOnInit() {
  const savedPermissions = localStorage.getItem('app_user_permissions');
  if (savedPermissions) {
    // 加载存储的权限
    this.permissionsService.loadPermissions(JSON.parse(savedPermissions));
  }
}

如果想确保权限在应用初始化完成前就加载好，可以用APP_INITIALIZER：

// 在AppModule中
import { APP_INITIALIZER } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';

export function loadPermissionsFactory(permissionsService: NgxPermissionsService) {
  return () => {
    const savedPermissions = localStorage.getItem('app_user_permissions');
    if (savedPermissions) {
      permissionsService.loadPermissions(JSON.parse(savedPermissions));
    }
    return Promise.resolve();
  };
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadPermissionsFactory,
      deps: [NgxPermissionsService],
      multi: true
    }
  ]
})
export class AppModule { }

方法三：结合用户认证，刷新时重新拉取权限（更安全） #

如果你的权限比较敏感，不适合存在本地存储（怕被篡改），可以在页面刷新时，先检查用户是否登录，若已登录则重新从后端拉取权限：

比如在AuthGuard中处理：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Observable, of, switchMap, tap } from 'rxjs';
import { AuthService } from './auth.service';
import { NgxPermissionsService } from 'ngx-permissions';

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

  canActivate(): Observable<boolean> {
    return this.authService.isLoggedIn().pipe(
      switchMap(isLoggedIn => {
        if (!isLoggedIn) {
          this.router.navigate(['/login']);
          return of(false);
        }
        
        // 重新从后端获取权限
        return this.authService.getUserPermissions().pipe(
          tap(permissions => {
            this.permissionsService.loadPermissions(permissions);
            // 可选：同时存到本地存储做缓存
            localStorage.setItem('app_user_permissions', JSON.stringify(permissions));
          }),
          map(() => true)
        );
      })
    );
  }
}

这种方式既能避免本地存储被篡改的风险，又能保证权限的准确性。

额外注意事项 #

• 选择存储方式：localStorage会永久保存权限（除非手动清除），sessionStorage则在浏览器关闭后清除，根据你的业务场景选择。
• 注销时清理权限：用户注销时，记得清除本地存储的权限并清空ngx-permissions的权限：

  logout() {
    localStorage.removeItem('app_user_permissions');
    this.permissionsService.flushPermissions();
    // 其他注销逻辑...
  }
  

• 敏感权限谨慎存储：涉及高权限操作的（比如删除数据），建议每次刷新都从后端拉取，不要依赖本地存储。

内容的提问来源于stack exchange，提问作者Janardhan Reddy. Meeniga