После завершения сеанса учетные данные предыдущего пользователя отображаются на странице вместо текущего пользователя в Angular 5. - PullRequest
Новая
       12

После завершения сеанса учетные данные предыдущего пользователя отображаются на странице вместо текущего пользователя в Angular 5.

0 голосов
/ 26 октября 2018

В угловом 5, когда я вышел из системы от одного пользователя и вошел в систему от другого пользователя, он отображает учетные данные предыдущего пользователя вместо текущего пользователя, пока я не обновлю страницу. Я использую localstorage.clear() метод. Все еще не работает.

Здесь это функция входа в систему 

 login(userLogin: LoginModel) {
    const objectToSend = JSON.stringify(userLogin);

     const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('withCredentials', 'true');
    // tslint:disable-next-line:max-line-length
    return this.http.post( this.appURL+'/api/auth/login', objectToSend, { headers: headers }).pipe(
      map((response: Response) => {
        // login successful if there's a jwt token in the response

        const response_token = response.json();
        console.log(response_token);
        const accessToken = response_token.auth_token;

        if (accessToken == null) {
          throw new Error('Received accessToken was empty');
        }

       // let refreshToken: string = response_token.refresh_token;
        const expiresIn: number = response_token.expires_in;

        const tokenExpiryDate = new Date();
        tokenExpiryDate.setSeconds(tokenExpiryDate.getSeconds() + expiresIn);

        const accessTokenExpiry = tokenExpiryDate;
        localStorage.setItem('auth_token', response_token.auth_token);
        localStorage.setItem('role', response_token.role);

        this.loggedIn = true;
        this._authNavStatusSource.next(true);

        this.router.navigate(['/orderhistory']);
        return true;

      }));
  }

А это функция выхода из системы 

logout() {

  localStorage.removeItem('auth_token');
  localStorage.removeItem('role');
  localStorage.clear();
  sessionStorage.clear();

  this.loggedIn = false;
  this._authNavStatusSource.next(false);

}

это компонент, в котором роль пользователя не обновляется соответствующим образом. 

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.scss']
})
export class OrderComponent implements OnInit {
  form: FormGroup;
  currentRole: string;

  constructor(private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService, private http: HttpClient) {

  }

  ngOnInit() {
    this.form = this.formBuilder.group({
      quantity: [null, Validators.required],
      prescription: [null],

    });
    this.currentRole = this.userService.Role;


  }

and this is the template. and this role is not updating after logout

 <form [formGroup]="form" class="form-horizontal">
          <span *ngIf="currentRole =='administrator'">
            <div class="form-group row">
              <label class="col-md-3 col-form-label">Client Name</label>
              <div class="col-md-3">
                <label class="col-form-label">{{orderModel.clientName}}</label>
              </div>
            </div>
          </span>
          <span>{{currentRole}}</span>
<form>

1 Ответ

0 голосов
/ 26 октября 2018

Вы очищаете локальное хранилище, и я подозреваю, что вы сможете подтвердить в Chrome Developer Tools (вкладка «Приложение»), что значения были очищены, поэтому обновление страницы работает.

Что выВы видите на экране результат значений, которые вы все еще сохранили в вашем компоненте или услуге.

Мой обычный поток выхода из системы выглядит примерно так:

  1. Очистить состояние браузера (что вы сделали).
  2. Очистить соответствующие значения службы.Обычно я управляю активным пользователем в службе, называемой UserService, и при выходе из системы служба также очищает поля, такие как имя или идентификатор активного пользователя, или что-либо еще, сохраненное здесь.При входе в систему пользователь обычно может просматривать значения, которые не должны быть доступны после выхода из системы.Поэтому я использую сервис Router для перехода на страницу, где пользователь может снова войти в систему.Для приложения, в котором для большинства действий требуется зарегистрированный пользователь, этого достаточно.

Мои шаги 2 и 3 очищают экран, поэтому устаревшие значения больше не отображаются.Шаг 1 действительно не позволяет приложению думать, что у пользователя все еще есть действующий сеанс.

...