如何避免在Angular中刷新后注销

Question

刷新页面后，我无法注销。我认为问题在于获取当前用户的方法或检查用户管理的方法。

管理员授权守卫。服务ts

export class AdminAuthGuardService implements CanActivate {

constructor(
    private router: Router,
    private userService: UserService,
) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.checkLogin();
}

checkLogin(): Observable<boolean> {
    return this.userService.getCurrentUser().pipe(
        map(user => {
            if (user) {
                const isUserAdmin = this.userService.isRoleAdmin();
                if (isUserAdmin) {
                    return true;
                } else {
                    this.router.navigate(['/forbidden']);
                    return false;
                    
                }
            } else {
                this.router.navigate(['/login']);
                return false;
            }
        })
    );
}

}

使用者服务ts

    export class UserService {
    
      currentUser!: User | null;
    
      private usersUrl = `${SERVER_API_URL}/api/user`;
      private apiServerUrl = environment.apiBaseUrl;
    
      constructor(private http: HttpClient) { }
    
      getCurrentUser(): Observable {
        return this.http.get(`${this.usersUrl}/current-user`);
      }
    
      isRoleAdmin(): boolean {
        if (this.currentUser) {
          return this.currentUser.authorities.some((authority: string) => authority === Authority.ADMIN);
        } else {
          return false;
        }
      }
    
      isRoleUser(): boolean {
        if (this.currentUser) {
          return this.currentUser.authorities.some((authority: string) => authority === Authority.USER);
        } else {
          return false;
        }
      }
    
      isRoleDeleter(): boolean {
        if (this.currentUser) {
          return this.currentUser.authorities.some((authority: string) => authority === Authority.DELETER);
        } else {
          return false;
        }
      }
    
      getStudentsData(userId: number): Observable{
        return this.http.get(`${this.apiServerUrl}/api/user/edit/${userId}`);
      }
    
      updateUser(profesor: Profesors[], userId: number): Observable{
        return this.http.put(`${this.apiServerUrl}/api/user/update/${userId}`, profesor);
      }
    
    }

登录名。组成部分ts

    export class LoginComponent implements OnInit {
    
      authenticating = false; // to show loading
      loginFailed = false; // to show login failed message
    
      userCredentials!: UserCredentials;
      private loggedIn = new BehaviorSubject(localStorage.getItem("isLoggedIn") === "true");
    
    
      constructor(
        private loginService: LoginService,
        private router: Router,
        private userService: UserService
      ) {
      }
    
      ngOnInit(): void {
        this.userCredentials = new UserCredentials();
    
      }
    
    
      login() {
        this.authenticating = true;
        this.loginFailed = false;
    
        this.loginService.authenticate(this.userCredentials).subscribe(
          (jwtToken: JwtToken) => this.successfulLogin(jwtToken),
          () => this.loginFailed = true
        ).add(() => this.authenticating = false);
      }
    
      successfulLogin(jwtToken: JwtToken) {
        localStorage.setItem('token', jwtToken.token); // store token value to localstorage
        this.userService.getCurrentUser().subscribe((currentUser: User) => this.userService.currentUser = currentUser);
        this.router.navigate(['/home']);
      }
      isUserLoggedIn(): boolean {
        return !this.userService.currentUser;
      }
    }   

 

使用者模型ts

    export class User {
        id: number;
        username: string;
        firstName: string;
        lastName: string;
        authorities: string[];
    
        constructor(id: number, username: string, firstName: string, lastName: string, authorities: string[]){
            this.id = id;
            this.username = username;
            this.firstName = firstName;
            this.lastName = lastName;
            this.authorities = authorities;
        }
    }

Answer 1

我通常会做的一件事是将ID保存在localStorage上。

当用户登录时，它会将id保存在localStorage上，当您尝试从该用户获取任何内容时，只需将id获取到localStorage。如果您想注销，只需从那里删除id，它就可以正常工作了！

我从来没有遇到过这样的问题，它总是对我有用！

注意：我只在测试某事时使用这种方式，而不是当它被认为是实时的时候

Answer 2

我将从一些重构开始：

移动用户类中的角色检查方法：

export class User {
  id: number;
  username: string;
  firstName: string;
  lastName: string;
  authorities: string[];

  constructor(user?: Partial<User>) {
    Object.assign(this, user);
  }

  isRoleAdmin = () => {
      return this.authorities.some(authority => authority === Authority.ADMIN);
  }

  isRoleUser = () {
    return this.authorities.some(authority => authority === Authority.USER);
  }

  isRoleDeleter = () {
    return this.authorities.some(authority => authority === Authority.DELETER);
  }
}

然后，您可以从服务中删除角色方法，并确保调用用户类构造函数，否则它将不是用户类的实例，它将只是一个普通对象：

export class UserService {
  currentUser!: User | null;

  private usersUrl = `${SERVER_API_URL}/api/user`;
  private apiServerUrl = environment.apiBaseUrl;

  constructor(private http: HttpClient) {}

  getCurrentUser(): Observable<User> {
    return this.http.get<User>(`${this.usersUrl}/current-user`).pipe(
        map(user => new User(user))
    );
  }

  getStudentsData(userId: number): Observable {
    return this.http.get(`${this.apiServerUrl}/api/user/edit/${userId}`);
  }

  updateUser(profesor: Profesors[], userId: number): Observable {
    return this.http.put(
      `${this.apiServerUrl}/api/user/update/${userId}`,
      profesor
    );
  }
}

然后，可以这样实现防护：

export class AdminAuthGuardService implements CanActivate {
  constructor(private router: Router, private userService: UserService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.checkLogin();
  }

  checkLogin(): Observable<boolean> {
    return this.userService.getCurrentUser().pipe(
      map((user) => {
        if (!user) {
          this.router.navigate(["/login"]);
          return false;
        }
        const isAllowed = user.isRoleAdmin();
        if (!isAllowed) {
          this.router.navigate(["/forbidden"]);
        }
        return isAllowed;
      })
    );
  }
}