刷新页面时，为什么经过身份验证不起作用 - 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));

    }
  }
});

所有时间都是真实的＆＃39;。即使用户尚未登录

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 语句是否应该返回 false 或 true

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（ '令牌'）;