`APP_INITIALIZER` - по выбору пользователя, возможно ли это? - PullRequest
Новая
       21

`APP_INITIALIZER` - по выбору пользователя, возможно ли это?

0 голосов
/ 17 мая 2019

Я реализовал azure и adal.js с моим приложением. этим приложением пользуются 2 группы людей. поэтому я держу 2 отдельные конфигурации. MsAdalAngular6Module принимает конфигурацию при инициации самого приложения.

Но я требую, чтобы приложение прекратило инициацию до тех пор, пока на экране не появится опция входа в систему, чтобы пользователь мог выбрать свою группу, а затем служба может предоставить конфигурацию, необходимую для инициализации приложения.

Возможно ли это с Angular? или каков правильный подход для инициализации приложения с различными конфигурациями по выбору пользователя?

Я пытался связаться с провайдером, но получил ошибку, Error: StaticInjectorError(AppModule)[InjectionToken Я добавил компонент service и login в массив deps:[]. как найти решение здесь?

Любой один совет, пожалуйста?

вот моя попытка: 

providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      multi: true,
      deps: [AppConfig, SignInComponent] //added both service and component throw error..
    },
    MsAdalAngular6Service,
    {
      provide: 'adalConfig',
      useFactory: getAdalConfig,
      deps: []
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InsertAuthTokenInterceptor,
      multi: true
    }
  ],

1 Ответ

0 голосов
/ 27 мая 2019

Чтобы получить эту работу, я создал собственный сервис и реализовал.это прекрасно работает для меня.

вот мой сервис file.ts: 

import { Injectable } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { StateShared } from "./../models/models";
import * as $ from 'jquery';

@Injectable({
    providedIn: 'root'
})
export class AppConfig  {

    value:boolean = true;
    option:string;
    popup = `
    <div class="site-wrapper"
        style="display:flex;flex-direction:column;
        min-height:100vh;border:0.5px solid rgba(0,0,0,0)">
    <div Id="optionHolder" class="main-section" style="
        flex: 1;
        display: flex;
        flex-direction:row;
        align-items: center;
        justify-content: center;
        padding:0 15px;
    ">

        <div class="singin-options" style="
            border: 3px dotted gray;
            display: flex;
            flex-direction:column;
            padding:1rem;

        ">
            <div class="form-check form-check-inline" style="
             margin-bottom: 1rem;
            ">
                <input class="form-check-input" (change)="onLoginChange($event)" value="CTS" type="radio" name="loginOption" id="inlineRadio1">
                <label class="form-check-label" for="inlineRadio1">Login as CTS Member</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" (change)="onLoginChange($event)" value="IBO" type="radio" name="loginOption" id="inlineRadio2">
                <label class="form-check-label" for="inlineRadio2">Login as IBO Member</label>
            </div>
        </div>
        <div class="signin" style="padding:1rem;">
            <button type="button" class="btn btn-success">Sign In</button>
        </div>

    </div></div>`

    constructor(private store:Store<StateShared>){}

    userOption:any;

    setUserOption() {

        let that = this;

        if(!this.value) return;

        return new Promise((resolve, reject) => {

            if(!localStorage.getItem("name")){

                $('body').append(this.popup);

                $("input[name=loginOption]:radio").change(function (event) {
                    that.userOption =  $(event.target).val();
                    $("button").prop('disabled', false);
                })

                $("button").prop('disabled', true);

                $("button").click(function () {
                    that.value = false;
                    localStorage.setItem("name", that.userOption);
                    resolve(true);

                })
            }

            if(localStorage.getItem("name")){
                resolve(true);
            }



        });
    }

    getUserOption(){

        $('body #optionWrapper').remove();

        switch (localStorage.getItem("name")) {
            case "CTS":
                return {
                    tenant: 'de08c407-19b9-427d-9fe8-edf254300ca7',
                    clientId: '828002a4-149f-478c-a318-933ad52b4c4f',
                    redirectUri: window.location.origin,
                    endpoints: {
                        "https://iboconfigservice.azurewebsites.net/api/":"828002a4-149f-478c-a318-933ad52b4c4f"
                    },
                    navigateToLoginRequestUrl: false,
                    cacheLocation: 'localStorage',
                    expireOffsetSeconds: 600,
                    postLogoutRedirectUri: window.location.origin
                };

            case "IBO":
                return {
                    tenant: 'intbacdev.onmicrosoft.com',
                    clientId: '5a5e1a7e-b31d-47bc-9be4-5a107f67fedb',
                    redirectUri: window.location.origin,
                    endpoints: {
                        "https://iboconfigservice.azurewebsites.net/api/":"828002a4-149f-478c-a318-933ad52b4c4f"
                    },
                    navigateToLoginRequestUrl: false,
                    cacheLocation: 'localStorage',
                    expireOffsetSeconds: 600,
                    postLogoutRedirectUri: window.location.origin
                };


            default:
                // code...
                break;
        }



    }

}
...