我有一个角度应用程序,有两个组件“登录”和“家” . 我希望在用户登录之前保护主组件 .
我有一个服务,它有一个布尔变量“isUserLoggedIn” . 根据这个变量的值,我保护我的组件 .
Network Service -
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
@Injectable()
export class NetworkService {
private isUserLoggedIn = false;
constructor(private _http:Http) {
}
getUserLoggedIn(){
console.log("network service ... isUserLoggedIn = "+this.isUserLoggedIn);
return this.isUserLoggedIn;
}
setUserLoggedIn(){
this.isUserLoggedIn = true;
console.log("service layer : setUserLoggedIn called .... isUserLoggedIn = "+this.isUserLoggedIn);
}
}
My auth-guard code
import { NetworkService } from './../services/network.service';
import { Router,CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
@Injectable()
export class AuthGuard implements CanActivate{
constructor(private networkservice:NetworkService, private router:Router){
}
canActivate(){
console.log("canActivate called : userLoggedIn = "+this.networkservice.getUserLoggedIn());
if(this.networkservice.getUserLoggedIn()){
return true;
}
else{
this.router.navigate(['/login']);
return false;
}
}
}
Login Component
import { Component, OnInit } from '@angular/core';
import { NetworkService } from './../services/network.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers : [NetworkService]
})
export class LoginComponent implements OnInit {
constructor(private networkservice : NetworkService, private router: Router) {
}
ngOnInit() {
}
onSubmit(value:any){
console.log("user = "+value.username+" password = "+value.password);
if(value.username == "user" && value.password == "user"){
this.networkservice.setUserLoggedIn();
this.router.navigate(['/home']);
}
else{
alert("Username or Password did not match !!!");
}
}
}
Router
import { AuthGuard } from './guards/auth.guard';
import { LoginComponent } from './login/login.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
export const router: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'home', component: HomeComponent, canActivate:[AuthGuard]},
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
Finally my app module
import { AuthGuard } from './guards/auth.guard';
.....
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
DataTablesModule,
Ng2UploaderModule,
routes
],
providers: [NetworkService,AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
目前我正在使用用户名和密码的硬编码文本 .
我的问题是,即使在登录组件将服务的“isUserLoggedIn”变量设置为“true”之后,auth-guard仍然会将其视为false . 因此我无法导航到“Home”组件 .
1 回答
发生这种情况是因为您有多个
NetworkService
实例,因此每个实例可以具有不同的登录状态 .应该只在根
AppModule
的providers数组中添加旨在成为单例的服务(为整个应用程序提供服务的单个实例) .您的问题是您还将服务添加到
LoginComponent
. 所以,只需从该组件中删除该行:一旦消失,在构造函数中注入的
NetworkService
将与AuthGuard
查询的NetworkService
相同 .