Make constant value accessible public

Ionic Framework Ionic Angular
1

I have a login token stored in the storage of the platform and every time I want to use it I need to use async in the function, Can someone plz help me to store it in a globally variable and access it everywhere without ASYNC in function.

Now if somewhere I need to use the token in a function I have to use the ASYNC with my function otherwise it will not work.

A function I build.

async ngOnInit() {
    const token = await Storage.get({ key: TTOKEN_KEY });
    const takenValue = token.value;

    let headers = new HttpHeaders({
      'Content-Type': 'application/json;',
      Authorization: 'Bearer ' + takenValue,
    });
    let options = { headers: headers };
    this.http
      .get('https://website.com/api/Details/'+this.cid, options)
      .subscribe((res: any) => {
        this.profile = res;
      });
}

My login.service.ts file is where I store generated TOKEN at the platform.

 login(credentials: { email; password }): Observable<any> {
    return this.http.post(`https://website.com/api/login`, credentials).pipe(
      map((data: any) => data.success.token),
      switchMap((token) => {
        return from(Storage.set({ key: TTOKEN_KEY, value: token }));
      }),
      tap((_) => {
        this.isAuthenticated.next(true);
      })
    );
  }

and

2

create a tokenService provider with a variable called tokenValue

import the service where you get the token the first time and then assign your token value to this.yourService.tokenValue

doing this, the token will be available globally for you app.
Of course you have to import that service in all the classes where you need to use it

2 Likes
3

This imho will be impossible to achieve as the underlying APIs (http, local storage, etc) are async by nature. So you will have to develop software with that in mind - that the results of a call will come in later.

This means discarding imperative thinking, moving onto functional thinking etc.

1 Like
4

Use service in ionic to store the value and import the service wherever you want and get the token there. Follow the below steps.
ionic generate service myappService
Import inside your component where your token is fetched.
import {MyAppServiceService} from "/myappService.service";
...
...
constructor(private app_service:MyAppServiceService){}
this.app_service.token=your_token;
In your service add a variable named token.
Thats it.

1 Like
5

While this pattern is great, it does expose the variable to each consumer in a way it can be muted directly without the service knowing it ( and likely any other consumer)

This breaches the single responsibility structure you actually want to achieve

A way to go around this, is to use Subject and Observable patterns

6

can you share an example? I love to learn new stuff :slight_smile:

7

Cool. Happy learning! I personally loved learning this part

1 Like
8

Some random notes:

A. I never interact with HTTP from pages or components, only services. Pages and components are easier to write if they live in a world containing only streams of business objects, and this facilitates frequently-seen evolution patterns. You can add and remove caches, mock backends out for testing, &c without touching any view layer code.

B. Do not fall into the trap of blasting as many custom headers as you can, thinking “what can it hurt?”. The #1 offender here is manually setting Content-Type. Angular’s HttpClient is smart, and automatically deals with Content-Type based on the type of thing you give it for request bodies. An object will automatically become application/json. When you set things manually that you don’t have to, three bad things happen: the code becomes harder to read because you’re obscuring the important stuff, you have another vector for stupid typos, and if somebody changes the backend transfer format, your manual setting will become wrong but still in charge.

C. async is syntactic sugar. It is never needed for anything. I personally consider it a solution in search of a problem. There is absolutely nothing wrong with never using it and explicitly declaring future return types like Observable<Foo> and Promise<Foo> instead.

D. Despite all the great general-purpose in-app communication stuff in this thread, for the specific question in the OP, interceptors are pretty much the “mic drop” answer. See the Angular docs for sample code. Your interceptor here can take a reference to the service that exposes an Observable of your authentication token, and then every HTTP request will be decorated with the Authorization header.

E. If you want to get fancy, you can use a custom X-No-Authorization header to signal to the interceptor that it should leave particular requests alone. In that case, the interceptor should eat that header before it gets out to the network, but not add the Authorization header. Implementation is left as an exercise for the reader.

3 Likes
9

Maybe not a direct answer to your question, but dit you consider using a HttpInterceptor? With an interceptor you only have one function that adds the token to every request to your API.

There are tons of examples out there, but here’s one to get the idea:

1 Like