Angular Service 在每次调用时都会重置

Posted 2023-03-10

【中文标题】Angular Service 在每次调用时都会重置

【英文标题】：Angular Service is reset on each call of it

【发布时间】：2017-11-05 19:11:54

【问题描述】：

在我的网络 Angular 项目中，我创建了一个 AuthenticationGuard 和一个 AuthenticationService 来处理安全问题。

这些文件来自我项目的另一个完美运行的分支。

下面是我的脚本的工作方式：

导航到“身份验证/登录” 用户输入他的凭据 Authservice调用后端wepApi获取Bearer Token 后端返回令牌。 AuthService 将他的 var 'isLoggedIn' 设置为 true； AuthService 使用路由器导航到“/home” AuthGuard 通过检查 AuthService 的“isLoggedIn”来检查身份验证。

我的问题是当 AuthGuard 访问 AuthService 时： AuthService 总是返回 false。

auth.guard.ts

import  Injectable        from '@angular/core';
import  CanActivate, Router, ActivatedRouteSnapshot,RouterStateSnapshot  from '@angular/router';
import  AuthService       from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate 
  constructor(private authService: AuthService, private router: Router) 

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean 
    let url: string = state.url;

    return this.checkLogin(url);
  

  checkLogin(url: string): boolean 
    if (this.authService.getIsLoggedIn())  
      return true; 
    

    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;

    // Navigate to the login page with extras
    this.router.navigate(['/auth/login']);
    return false;
  

auth.service.ts

import  Injectable  from '@angular/core';
import  Router  from '@angular/router';

import  Observable  from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';

import  config  from './../shared/smartadmin.config';

import  Http, Headers, RequestOptions, Response  from '@angular/http';
import 'rxjs/add/operator/map'

@Injectable()
export class AuthService 
    private isLoggedIn: boolean = false;

    public redirectUrl: string;

    constructor(private router: Router, private http: Http) 
    

    public getIsLoggedIn(): boolean 
        console.log("getIsLoggedIn() = " + this.isLoggedIn); // Always returns false
        return this.isLoggedIn;
    

    public login(username: string, password: string) 
        this.ProcessLogin(username, password)
            .subscribe(result => 
                if (result === true) 
                    console.log("before attribution");
                    console.log("this.isLoggedIn = " + this.isLoggedIn); // returns false
                    this.isLoggedIn = true;
                    console.log("after attribution");
                    console.log("this.isLoggedIn = " + this.isLoggedIn); // returns true
                    this.router.navigate(this.redirectUrl ? [this.redirectUrl] : ['/home']);
                 else 
                    this.logout();
                
            );
    


    public logout(): void 
        localStorage.removeItem('oAuthToken');
        this.isLoggedIn = false;
    

    private ProcessLogin(username: string, password: string): Observable<boolean> 

        let headers = new Headers( 'Content-Type': 'application/x-www-form-urlencoded' );
        let options = new RequestOptions( headers: headers );
        let body = 'grant_type=password&username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password);

        let endpoint = config.API_ENDPOINT + 'token';

        return this.http.post(endpoint, body, options)
            .map((response: Response) => 
                // login successful if there's a jwt token in the response
                let token = response.json() && response.json().access_token;
                if (token) 
                    localStorage.setItem('oAuthToken', token);

                    // return true to indicate successful login
                    return true;
                 else 
                    localStorage.removeItem('oAuthToken');
                    // return false to indicate failed login
                    return false;
                
            );
    

【问题讨论】：

您能否将 if else 逻辑移至订阅部分并重试？只需返回 response.json() 内部地图即可。

对不起，我不太明白你的提议。能准确点吗？

不要在ProcessLogin 方法中返回Observable<boolean>，而是在map 中返回response.json()。当你在 login 方法中 subscribe 到 ProcessLogin 时，执行 if/else 逻辑。

好的，我已经将 map 的逻辑移到了 Subscribe 部分，但是行为是一样的：/

能否也提供定义AuthService注入的模块的模块定义和“根”模块定义，即AppModule？

【参考方案1】：

在没有看到您的模块定义的情况下，我怀疑您没有将 AuthService 设为核心服务（单例），这意味着使用它的每个模块都有自己的实例（跟踪自己的 isLoggedIn 标志）。

要使服务在角度上成为单例，它必须由根模块注入器提供服务。为此，您需要这样做：

import  NgModulep  from '@angular/core';
import  CommonModule, ModuleWithProviders  from '@angular/common';
import  AuthService, AuthGuard  from './services/index';

@NgModule(
  imports: [
    CommonModule,
    ModuleWithProviders
  ]
)
export class SharedModule 

  static forRoot(): ModuleWithProviders 
    return 
      ngModule: SharedModule,
      providers: [
        AuthService,
        AuthGuard
      ]
    ;
  

然后在将SharedModule导入根AppModule时调用forRoot方法。

@NgModule(
  imports: [
    ...
    SharedModule.forRoot(),
    ...
  ],
  ...,
  bootstrap: [AppComponent]
)
export class AppModule  

在此处查看“配置核心服务”https://angular.io/docs/ts/latest/guide/ngmodule.html#!#core-for-root

【讨论】：

使用相同的修复程序遇到了同样的问题。我的核心模块被导入了两次。 Smh...非常感谢。

【参考方案2】：

我有一个类似的问题，在我的情况下是由连接到按钮元素的单击事件引起的，但是在 Chrome 中，每次单击按钮时都会提交整个表单，因为 CHrome 的默认操作是处理如果按钮上没有类型属性，则单击按钮作为提交。

解决方法是将标签 type="button" 添加到 html

描述here

【参考方案3】：

依赖是注入器范围内的单例。

然而，Angular DI 是一个分层注入系统，这意味着 嵌套注入器可以创建自己的服务实例。更多 信息见Hierarchical Injectors。Source

请仔细检查您provide您的服务的位置。

列出您的模块并检查每个模块中的providers 部分。 如果有多个实例 - 每个模块将提供自己的服务实例。

我遇到了同样的问题，发现我将 AuthService 添加到 AppModule 并忘记将其从 AuthModule 中删除，因此登录页面（在 auth 模块中）有它的其他实例。