为什么身份验证在刷新页面时不起作用 - Angular 5

Question

为什么刷新页面时身份验证不起作用？当用户登录时。刷新页面后，用户将注销。

auth

/auth.service.ts：

    import {Injectable} from '@angular/core';
    import {Router} from '@angular/router';
    import {BehaviorSubject} from 'rxjs/BehaviorSubject';
    import {User} from './user';
    import {Http, Headers, RequestOptions, Response} from '@angular/http';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
    import {AppComponent} from '../app.component';
    import {Observable} from 'rxjs/';
    import {JwtHelperService} from '@auth0/angular-jwt';
    @Injectable()
    export class AuthService {
      private loggedIn = new BehaviorSubject<boolean>(false);
      private loggedUser = new BehaviorSubject<User>(<User>{});
      private loggedPassword = new BehaviorSubject<User>(<User>{});
      result: any;
      _loggedIn: boolean;

      get isLoggedIn() {
        return this.loggedIn.asObservable();
      }
      constructor(private router: Router, private _http: Http, public jwtHelperService: JwtHelperService) {
      }

      login(user: User) {
        this.getUsers().subscribe(data => {
          for (const it of data) {
            if (user.userName === it.name && user.password === it.password) {
              this._loggedIn = true;
              this.loggedIn.next(true);
              this.loggedUser.next(user);
              this.loggedPassword.next(user);
              this.router.navigate(['/']);              
            }
          }
        });
      }
      registration(newUser: User): Promise<User> {
        this.router.navigate(['/login']);
        return this._http.post('/api/users', newUser)
          .toPromise()
          .then(response => response.json().data as User); // .data as User
      }      
      getUsers() { 
        return this._http.get('/api/users').map(result => this.result = result.json().data);
      }

      public isAuthenticated(): boolean {
        const token = localStorage.getItem('token');

         if (!token) {
          return false;
        } else {
          return true; // !this.jwtHelperService.isTokenExpired(token);
        }
      }

      /*
        logout() {
          this.loggedIn.next(false);
          this.router.navigate(['/login']);
        }
      */
    }

auth

/auth.guard.ts：

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

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

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.isLoggedIn
      .take(1)
      .map((isLoggedIn: boolean) => {
        if (!isLoggedIn && !this.authService.isAuthenticated()) { 
          this.router.navigate(['/login']);
          return false;
        }
        return true;
      });
  }
}

我的代码中缺少哪些功能？

我应该在 login(( 方法中调用 isAuthenticated(( 方法吗？

值令牌是否在 isAuthenticated(( 方法中正确返回？

Answer 1

看起来您正在尝试从本地存储中获取身份验证令牌，但您的 login(( 方法永远不会将其放入本地存储中。

因此，当您重新加载时，仅在内存中的身份验证令牌会消失，并且也不在本地存储中。

Answer 2

在方法 login(( 中，但用户在刷新页面后注销：

login(user: User) {
 this.getUsers().subscribe(data => {
  for (const it of data) {
    if (user.userName === it.name && user.password === it.password) {        
      this._loggedIn = true;
      this.loggedIn.next(true);
      this.loggedUser.next(user);
      this.loggedPassword.next(user);
      this.router.navigate(['/']);  // login
      console.log('loggedIn.value : ');
      console.log(this.loggedIn.value);
         localStorage.setItem('token', JSON.stringify(user));
    }
  }
});

所有时间都是"象征性的真实"。即使用户尚未登录

Answer 3

我想

这样做的是，刷新页面后，登录用户尚未注销。

我的代码：

app.modules.ts：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {ReactiveFormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {LoginComponent} from './login/login.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppMaterialModule} from './app-material/app-material.module';
import {FormsModule} from '@angular/forms';
import {AboutComponent} from './about/about.component';
import {AuthService} from './auth/auth.service';
import {AuthGuard} from './auth/auth.guard';
import {HttpModule} from '@angular/http';
import './rxjs-operators';
import {RegistrationComponent} from './registration/registration.component';
import { JwtModule } from '@auth0/angular-jwt';
@NgModule({
  declarations: [
    AppComponent,     // plik app.component.ts
    HomeComponent,    // plik home.component.ts
    AboutComponent,
    LoginComponent,   // plik login.component.ts
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AppMaterialModule,
    FormsModule,      // dodane z prjketu ng5
    HttpModule /* ,
       JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return localStorage.getItem('token');
        },
        whitelistedDomains: ['/login']
      }
    }) */
  ],
  providers: [AuthService, AuthGuard],
 //  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts：

import {Component} from '@angular/core';
import {AuthService} from './auth/auth.service';
import {LoginComponent} from './login/login.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  users: Array<any>;
  _loggedIn: boolean;
  constructor(private _data: AuthService) {

    this._data.isLoggedIn.subscribe(data => {
        this._loggedIn = data.valueOf();
    });

    this._data.getUsers()
      .subscribe(res => {
        this.users = res;           
      });
  } 
}

app.component.html：

<ul>
  <li><a routerLink="">Home</a></li>
  <li><a routerLink="about">About</a></li>
    <li><a *ngIf="!_loggedIn; else registration" routerLink="login">Login</a></li> 
     <ng-template #registration><li><a  routerLink="registration">Registration</a></li>
     <!--    <button md-button (click)="onLogout()">Logout</button> -->
     </ng-template>
</ul>
{{_loggedIn}}<p>
</p>     
<router-outlet></router-outlet>

它有效，因为登录用户显示注册按钮。刷新页面后，变量_loggedIn等于 false

app.routing.modules.ts：

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthGuard} from './auth/auth.guard';
import {AboutComponent} from './about/about.component';
import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';
import {RegistrationComponent} from './registration/registration.component';
const routes: Routes = [
  {
    path: '', 
    component: HomeComponent,
    canActivate: [AuthGuard]
  }, {
    path: 'login',
    component: LoginComponent 
  }, {
    path: 'registration',
    component: RegistrationComponent
  }, {
    path: 'about',
    component: AboutComponent 
  }
];

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

login.component.ts：

import {AuthService} from './../auth/auth.service';
import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {AppComponent} from '../app.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form: FormGroup;
  constructor(
    private fb: FormBuilder,
    private authService: AuthService
  ) {
      this.authService._loggedIn = false;
  }
  ngOnInit() {}
  onSubmit() {
      this.authService.login(this.form.value );
  }
}

login.componet.ts：

        <form class="example-form" [formGroup]="form" (ngSubmit)="onSubmit()">
            <p>Please login to continue</p>             

                User * <input matInput formControlName="userName" required>
        <br />
                Password * <input matInput type="password" formControlName="password" required>    

                <button mat-raised-button color="primary" type="submit">Login</button>              
        </form>

auth

/auth.component.ts：

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {User} from './user';
import {Http, Headers, RequestOptions, Response} from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {AppComponent} from '../app.component';
import {Observable} from 'rxjs/';

// import {JwtHelperService} from '@auth0/angular-jwt';

@Injectable()

export class AuthService {

  private loggedIn = new BehaviorSubject<boolean>(false);
  private loggedUser = new BehaviorSubject<User>(<User>{});
  private loggedPassword = new BehaviorSubject<User>(<User>{});
  result: any;
  _loggedIn: boolean;
  get isLoggedIn() {
    return this.loggedIn.asObservable();
  }
  // , public jwtHelperService: JwtHelperService
  constructor(private router: Router, private _http: Http) { }
  login(user: User) {
    this.getUsers().subscribe(data => {
      for (const it of data) {
        if (user.userName === it.name && user.password === it.password) {
        localStorage.setItem('token', JSON.stringify(user));
          this._loggedIn = true;
          this.loggedIn.next(true);
          this.loggedUser.next(user);
          this.loggedPassword.next(user);
          this.router.navigate(['/']);  
        }
      }
    });
  }

  getUsers() { 
    return this._http.get('/api/users').map(result => this.result = result.json().data);
  }

  public isAuthenticated(): boolean {
    const token = localStorage.getItem('token');
    // const token: string = this.jwtHelperService.tokenGetter();
    if (!token) {
      return false;
    } else {
      return true; // !this.jwtHelperService.isTokenExpired(token);
    }
  }
}

我不知道 if 语句在这里应该返回假还是真

auth

/auth.guard.ts：

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

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

我应该在此处删除令牌吗？ localStorage.removeItem('token'(;