我想在我的登录页面中设置“记住我”。我设置了localstorage会话,但是我想我错过了服务文件中的一部分,这就是我的服务没有响应的原因。我尝试 Angular 4, remember me function,但没有得到密钥。 请帮忙。
Login.html
<h2>Login</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" formControlName="username" class="form-control" [(ngModel)]="name" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" [(ngModel)]="pwd" name="pwd" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<div class="form-group">
<label><input type="checkbox" formControlName="rememberMe" class="form-control">Remember me</label>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary">Login</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<a [routerLink]="['/register']" class="btn btn-link">Register</a>
</div>
</form>
<div><p>Username :{{name}}</p>
<p>Pwd:{{pwd}}</p>
</div>
Login.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AlertService, AuthenticationService } from '../_services';
@Component({templateUrl: 'login.component.html'})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
loading = false;
submitted = false;
returnUrl: string;
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService,
private alertService: AlertService
) {
// redirect to home if already logged in
if (this.authenticationService.currentUserValue) {
this.router.navigate(['/']);
}
}
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
// convenience getter for easy access to form fields
get f() { return this.loginForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.loginForm.invalid) {
return;
}
this.loading = true;
this.authenticationService.login(this.f.username.value, this.f.password.value)
.pipe(first())
.subscribe(
data => {
this.router.navigate([this.returnUrl]);
},
error => {
this.alertService.error(error);
this.loading = false;
});
}
}
Authentication.service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../_models';
import { tokenKey } from '@angular/core/src/view';
import { Token } from '@angular/compiler/src/ml_parser/lexer';
import { Key } from 'selenium-webdriver';
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;
isRemberMeChecked: boolean=true;
constructor(private http: HttpClient) {
this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
this.currentUser = this.currentUserSubject.asObservable();
}
public get currentUserValue(): User {
return this.currentUserSubject.value;
}
login(username: string, password: string) {
return this.http.post<any>(`/users/authenticate`, { username, password })
.pipe(map(user => {
// login successful if there's a jwt token in the response
if (user && user.token && this.isRemberMeChecked) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('1','username')
//localStorage.setItem('currentUser', JSON.stringify({ token: 3, name: username }));
localStorage.getItem('1')
}
return user;
}));
}
logout() {
// remove user from local storage to log user out
localStorage.removeItem('currentUser');
this.currentUserSubject.next(null);
}
}
我是Angular的新手,谢谢。
答案 0 :(得分:0)
您可以将用户状态和jwt令牌保存在本地存储中。并在下一个请求拦截器中使用它。使用isLogged这样的变量在本地存储中 会话过期后,会话存储将被清除。因此在这里我们使用localstorage插入
答案 1 :(得分:0)
loginForm = new FormGroup({
email: new FormControl('', Validators.required),
password: new FormControl('', Validators.required),
rememberMe: new FormControl(false)
});
this.authenticationService.login(this.f.username.value, this.f.password.value,this.f.rememberMe.value)
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '@env/environment';
import { Observable, BehaviorSubject } from 'rxjs';
import { tap } from 'rxjs/operators';
import { UserInUser } from '../../models/signInUser';
@Injectable({
providedIn: 'root'
})
export class AuthService {
isLoggedIn: boolean = false;
httpOptions = null;
rememberMe: boolean = false;
private currentUserSubject: BehaviorSubject<UserInUser>;
public currentUser: Observable<UserInUser>;
constructor(
public router: Router,
private http: HttpClient
) //public ngZone: NgZone // NgZone service to remove outside scope warning
{
this.rememberMe = localStorage.getItem('rememberCurrentUser') == 'true' ? true : false;
if ((this.rememberMe = true)) {
this.currentUserSubject = new BehaviorSubject<UserInUser>(
JSON.parse(localStorage.getItem('currentUser'))
);
} else {
this.currentUserSubject = new BehaviorSubject<UserInUser>(
JSON.parse(sessionStorage.getItem('currentUser'))
);
}
this.currentUser = this.currentUserSubject.asObservable();
this.httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
}
public get currentUserValue(): UserInUser {
return this.currentUserSubject.value;
}
SignIn(username: string, password: string, isRememberMe: boolean) {
return this.http
.post<any>(environment.apiUrl + 'users/authenticate', { _id: username, password: password })
.pipe(
tap(user => {
if (user && user.token) {
if (isRememberMe) {
this.resetcredentials();
//your logged out when you click logout
localStorage.setItem('currentUser', JSON.stringify(user));
localStorage.setItem('rememberCurrentUser', 'true');
} else {
//your logged out when page/ browser is closed
sessionStorage.setItem('currentUser', JSON.stringify(user));
}
// login successful if there's a jwt token in the response
this.isLoggedIn = true;
this.currentUserSubject.next(user);
return true;
} else {
return false;
}
})
);
}
resetcredentials() {
//clear all localstorages
localStorage.removeItem('rememberCurrentUser');
localStorage.removeItem('currentUser');
sessionStorage.removeItem('currentUser');
this.currentUserSubject.next(null);
}
logout() {
//clear all localstorages and redirect to main publib page
this.resetcredentials();
this.router.navigate(['/'], { replaceUrl: true });
}
}