我正在使用canActivate,但是刷新页面后它会返回登录页面(默认页面)

时间:2019-06-05 19:15:03

标签: angular angular2-routing

所以我创建了一个表单,用户可以在其中输入名称和密码,如果用户输入了某些内容并单击了登录名(会话存储中存储的数据),则下一页将打开索引页面。现在,在表单中提供一些输入后,将显示索引页面,但是当我刷新该页面时,它将引导我返回登录页面。

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;
}
}

0 个答案:

没有答案