Как вызвать человека Нажмите Запомнить меня или нет

Question

Я хочу, чтобы меня запомнили на странице входа. При нажатии запомнить меня, и если пользователь закроет браузер без выхода из системы, его можно открыть снова без необходимости входа. Моя проблема в том, как мне нужно вызвать, чтобы сделать различие между пользователем, который щелкает помнит меня и пользователем, который не нажимает помните меня?

HTML

<form  (ngSubmit)="onSubmit(form.value)" #form="ngForm">
  <ng-content select='h3'></ng-content>
    <label> 
    Email Address
    <input type="email" name="email">
  </label>

    <label> 
    Password
    <input type="password" name="password">
  </label>
     <label style="display: flex">
    <input type="checkbox"> 
    Rememeber me.
  </label>
<button type="submit">Login</button>
</form>

Компонент

    ngOnInit() {
     this.AutoLogin();
    }

    onSubmit() {
    this.auth.login(this.loginForm.value).subscribe((res) => {
      localStorage.setItem('token', res['accessToken']);
      localStorage.setItem('name', res['name']);
      localStorage.setItem('role', res['role']);
      localStorage.setItem('email', res['email']);
      localStorage.setItem('userId', res['userId']);
      this.toastrService.success('Successfully Login!');
      this.router.navigate(['/home']);
    },
    (err) => {

    });
  }

    AutoLogin(){
        var accessTokenObj = localStorage.getItem("token");
    console.log(accessTokenObj);
        if (accessTokenObj) {
          this.router.navigate(['/home']);
        } else {
          console.log("You need to login")
        }
       }

Answer 1

Я бы посоветовал вам привязать значение Запомнить меня к модели и сохранить в локальном хранилище, сделайте проверку в autoLogin ()

HTML

<form  (ngSubmit)="onSubmit(form.value)" #form="ngForm">
  <ng-content select='h3'></ng-content>
    <label> 
    Email Address
    <input type="email" name="email">
  </label>

    <label> 
    Password
    <input type="password" name="password">
  </label>
     <label style="display: flex">
    <input type="checkbox" [(ngModel)]="rememberMe"> 
    Remember me.
   </label>
  <button type="submit">Login</button>
 </form>

Компонент

rememberMe: boolean;
ngOnInit() {
     this.rememberMe = false;
     this.AutoLogin();
    }

    onSubmit() {
    this.auth.login(this.loginForm.value).subscribe((res) => {
      localStorage.setItem('token', res['accessToken']);
      localStorage.setItem('name', res['name']);
      localStorage.setItem('role', res['role']);
      localStorage.setItem('email', res['email']);
      localStorage.setItem('userId', res['userId']);
      // Save value to local storage
      if(rememberMe) {
        localStorage.setItem('rememberMe', 'yes')
      }
      this.toastrService.success('Successfully Login!');
      this.router.navigate(['/home']);
    },
    (err) => {

    });
  }

    AutoLogin(){
        const accessTokenObj = localStorage.getItem("token");
        // Retrieve rememberMe value from local storage
        const rememberMe = localStorage.getItem('rememberMe');
    console.log(accessTokenObj);
        if (accessTokenObj && rememberMe == 'yes') {
          this.router.navigate(['/home']);
        } else {
          console.log("You need to login")
        }
       }

Надеюсь, это поможет.

Answer 2

Примерно так может быть проще:

if(rememberMe){
  localStorage.setItem("token", MY_TOKEN);
}else{
  sessionStorage.setItem("token", MY_TOKEN);
}

Теперь создайте RouteGuard для аутентификации.

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public router: Router) {}
  canActivate(): boolean {
    var token = localStorage.getItem("token") || sessionStorage.getItem("token");
    if (!myNotAuthenticatedMethod(token)) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

Answer 3

если под терминами «запомнить меня» вы подразумеваете автоматический вход на стороне клиента, ознакомьтесь с описанными здесь функциями автоматического входа { ссылка } но функциональность «помни меня» так или иначе связана с вашим бэкэндом и сервисом аутентификации, когда вам нужно запоминать пользователей во время их аутентификации, что приводит к хранению специальных данных на сервере и извлечению их при необходимости. для этого взгляните на сайт laravel на https://laravel.com/docs/6.x/authentication#remembering -пользователях