Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何制作Angular2 Service单例?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正试图在我的应用程序中实现一个auth guard.即;只有经过身份验证的用户才能访问我的应用的某些路由鉴于 here,我正在追踪啧啧.

一旦用户登录,我将我的Authservice中的布尔值更改为true以指示用户登录.这需要在应用程序的整个生命周期中保留.

下面给出了源代码

AUTH-guard.service.ts

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

@Injectable()
export class AuthGuardservice 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 {
    console.log('Auth Guard service: ' + this.authservice.isLoggedIn);
    if (this.authservice.isLoggedIn) { return true; }
    // Store the attempted URL for redirecTing
    this.authservice.redirectUrl = url;

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

auth.service.ts

import { Injectable } from '@angular/core';
    import { http } from '@angular/http';

    import {  User } from '../user/shared/user.model';

    import { serviceBase } from '../../core/service.base';
    import { appConfig } from '../../core/app.config';

    @Injectable()
    export class  Authservice extends serviceBase {
        public isLoggedIn: Boolean = false;
        redirectUrl: String;
        apiUrl: String;
        constructor(private http: http) {
            super();
            this.apiUrl = appConfig.apiBaseUrl + '/users/signin';
        }
        signin(user: User,successCallBACk,errorCallBACk) {
            return this.http.post(this.apiUrl,user).subscribe(
                res => {
                    this.isLoggedIn = true;
                    successCallBACk(res);
                },err => {
                    //this.isLoggedIn = false;
                    errorCallBACk(err);
                }
            );
        }            
    }

login.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,FormControl,Validators } from '@angular/forms';
import { Router } from '@angular/router';
import {  User } from '../../user/shared/user.model';
import {  Authservice } from '../auth.service';

@Component({
    modulEID: module.id,templateUrl: 'login.component.html'
})
export class AdminLoginComponent implements OnInit{

    user: User;
    userLoginForm: FormGroup;

    constructor(
        private formBuilder: FormBuilder,private authservice: Authservice,private router: Router){
        thi@R_618_11163@ser = new User();
    }

    ngOnInit(){
        this.buildLoginForm();
    }
    buildLoginForm() {
        ...
    }
    login() {
        if(!thi@R_618_11163@serLoginForm.valid) return false;
        this.authservice.signin(thi@R_618_11163@ser,response => {
                console.log('Login Component: ' + this.authservice.isLoggedIn);
                this.router.navigate(['/admin','products']);
            },response => {} 
        );
    }
}

控制台输出

XHR finished loading: POST "http://localhost:3000/api/users/signin".
login.component.ts:40 Login Component: true
auth-guard.service.ts:23 Auth Guard service: false

编辑:app.module.ts

import { NgModule } from '@angular/core';
    ...
    import { AuthGuardservice } from './auth/auth-guard.service';
    import { Authservice } from './auth/auth.service';

    @NgModule({
        imports: [
            ...
            AdminRoutIngModule
        ],exports: [
        ],declarations: [
            ...
            AdminLoginComponent,...
        ],providers: [
            AuthGuardservice,Authservice,bootstrap:[]
    })
    export class AdminModule {}

在这做错了什么?任何帮助,将不胜感激.

如ranakrunal9所提到的,如果您在组件或指令中提供服务,则会为每个此类组件实例获取一个新实例.

您还获得了延迟加载模块的新实例(使用loadChildren加载).延迟加载的模块获得自己的根范围,如果在该延迟加载的模块中提供该服务,则此模块中的组件和服务将获得注入的服务的不同实例.

为确保您的整个应用程序只有一个实例,请仅在AppModule或AppModule加载的模块中直接或间接使用导入提供:[…].

另见https://stackoverflow.com/a/40981772/217408

大佬总结

以上是大佬教程为你收集整理的如何制作Angular2 Service单例?全部内容,希望文章能够帮你解决如何制作Angular2 Service单例?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。