所以我创建了一个表单,用户可以在其中输入名称和密码,如果用户输入了某些内容并单击了登录名(会话存储中存储的数据),则下一页将打开索引页面。现在,在表单中提供一些输入后,将显示索引页面,但是当我刷新该页面时,它将引导我返回登录页面。
login.component.html ~
<div class="container-fluid formcenter">
<h1 class="logo">member login</h1>
<form (ngSubmit)="onsubmit(f)" #f="ngForm">
<div class="form-group ">
<input type="email" name="email" class="form-control formsize"
placeholder="email" ngModel>
</div>
<div class="form-group">
<input type="password" name="password" class="form-control formsize"
placeholder="password" ngModel>
</div>
<button type="submit" class="button" routerLink="/index">login</button>
</form>
<div class="forgot">
<h3>forgot username/password?</h3>
</div>
<div class="newaccount">
<a routerLink="/signup" class="newac">create your account<img
src="https://img.icons8.com/ios/25/000000/right.png"
style="display:inline;margin-left:0.5vw;"></a>
</div>
</div>
login.component.ts~
const STORAGE_KEY:string[]=['name','password'];
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private auth:Authservice,@Inject(SESSION_STORAGE) private
storage: StorageService) {
}
username:string="";
password:string="";
onsubmit(form:NgForm){
this.username=form.value.email;
this.password=form.value.password;
if(this.username.length>0 || this.password.length>0){
this.storage.set(STORAGE_KEY[0], this.username);
this.storage.set(STORAGE_KEY[1], this.password);
this.auth.login();
}
}
ngOnInit() {
// console.log(this.storageserve.doSomethingAwesome());
}
}
authguard.service.ts~
const STORAGE_KEY:string[]=['name','password'];
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private auth:Authservice,@Inject(SESSION_STORAGE) private
storage: StorageService) {
}
username:string="";
password:string="";
onsubmit(form:NgForm){
this.username=form.value.email;
this.password=form.value.password;
if(this.username.length>0 || this.password.length>0){
this.storage.set(STORAGE_KEY[0], this.username);
this.storage.set(STORAGE_KEY[1], this.password);
this.auth.login();
}
}
ngOnInit() {
// console.log(this.storageserve.doSomethingAwesome());
}
}
auth.service.ts
export class Authservice{
loggedIn=false;
isAuthenticate(){
const promise=new Promise(
(resolve,reject)=>{
setTimeout(()=>{
resolve(this.loggedIn);
},300);
}
);
return promise;
}
login(){
this.loggedIn=true;
}
logout(){
this.loggedIn=false;
}
}
approuting.module.ts~
export class Authservice{
loggedIn=false;
isAuthenticate(){
const promise=new Promise(
(resolve,reject)=>{
setTimeout(()=>{
resolve(this.loggedIn);
},300);
}
);
return promise;
}
login(){
this.loggedIn=true;
}
logout(){
this.loggedIn=false;
}
}