可以激活防护 angular 2
canactivate guard angular 2
我有一个 angular 应用程序,其中包含两个组件 "login" 和 "home"。我想在用户登录之前保护主页组件。
我的服务有一个布尔变量 "isUserLoggedIn"。我根据这个变量的值来保护我的组件。
网络服务 -
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);
}
}
我的授权码
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;
}
}
}
登录组件
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 !!!");
}
}
}
路由器
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);
最后是我的应用程序模块
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" 组件。
发生这种情况是因为您有 NetworkService
的多个实例,所以每个实例都可以有不同的登录状态。
旨在成为单例(为整个应用程序提供服务的单个实例)的服务应仅添加到根 AppModule
的提供者数组中。
您的问题是您还向 LoginComponent
添加了服务。因此,只需从该组件中删除这一行:
@Component({
providers : [NetworkService] // <-- DELETE or this will create a new instance.
})
一旦消失,注入到构造函数中的 NetworkService
将与 AuthGuard
查询的 NetworkService
实例相同。
我有一个 angular 应用程序,其中包含两个组件 "login" 和 "home"。我想在用户登录之前保护主页组件。
我的服务有一个布尔变量 "isUserLoggedIn"。我根据这个变量的值来保护我的组件。
网络服务 -
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);
}
}
我的授权码
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;
}
}
}
登录组件
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 !!!");
}
}
}
路由器
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);
最后是我的应用程序模块
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" 组件。
发生这种情况是因为您有 NetworkService
的多个实例,所以每个实例都可以有不同的登录状态。
旨在成为单例(为整个应用程序提供服务的单个实例)的服务应仅添加到根 AppModule
的提供者数组中。
您的问题是您还向 LoginComponent
添加了服务。因此,只需从该组件中删除这一行:
@Component({
providers : [NetworkService] // <-- DELETE or this will create a new instance.
})
一旦消失,注入到构造函数中的 NetworkService
将与 AuthGuard
查询的 NetworkService
实例相同。