|
1 | | -# Implementing Custom Middleware Chain |
| 1 | +# Using Custom Middleware Chain |
2 | 2 |
|
3 | 3 | ## Middleware |
4 | 4 |
|
5 | | -As name suggests it comes in middle of something and that is request and response cycle. It has access to context object which contains request, response objects and any other options that are specific to middleware. Also it has an access to execute next middleware in the chain. |
| 5 | +As name suggests it comes in middle of something and that is request and response cycle. It has access to context object which contains request, response objects and any other options that are specific to middleware. Also it has an access to execute next middleware in the chain. |
| 6 | + |
| 7 | +## Step by step procedure |
| 8 | + |
| 9 | +### Implement Middlewares |
| 10 | + |
| 11 | +Create own set of middlewares by implementing [Middleware](../src/IMiddleware.ts) interface. Here two middlewares are created one for handling Logging and another for handling http request and response. |
| 12 | + |
| 13 | +First middleware is passed with the context object containing request, and other middleware specific options. One has to explicitly make call to execute method of the next middleware with context object once the current middleware work is over. |
| 14 | + |
| 15 | +NOTE: Http message handler should set the response object in the context object. |
| 16 | + |
| 17 | +```typescript |
| 18 | +// MyLoggingHandler.ts |
| 19 | +import { Middleware } from "@microsoft/microsoft-graph-client"; |
| 20 | +import { Context } from "@microsoft/microsoft-graph-client"; |
| 21 | + |
| 22 | +export class MyLoggingHandler implements Middleware { |
| 23 | + |
| 24 | + private nextMiddleware: Middleware; |
| 25 | + |
| 26 | + public async execute(context: Context): Promise<void> { |
| 27 | + try { |
| 28 | + let url: string; |
| 29 | + if (typeof context.request === "string") { |
| 30 | + url = context.request; |
| 31 | + } else { |
| 32 | + url = context.request.url; |
| 33 | + } |
| 34 | + console.log(url); |
| 35 | + await this.nextMiddleware.execute(context); |
| 36 | + } catch(error) { |
| 37 | + throw error; |
| 38 | + } |
| 39 | + } |
| 40 | + |
| 41 | + public setNext(next: Middleware): void { |
| 42 | + this.nextMiddleware = next; |
| 43 | + } |
| 44 | +} |
| 45 | +``` |
| 46 | + |
| 47 | +```typescript |
| 48 | +// MyHttpMessageHandler.ts |
| 49 | +import { Middleware } from "@microsoft/microsoft-graph-client"; |
| 50 | + |
| 51 | +export class MyHttpMessageHandler implements Middleware { |
| 52 | + public async execute(context: Context): Promise<void> { |
| 53 | + try { |
| 54 | + // For more information about context object refer "Context" section below |
| 55 | + let response = await fetch(context.request, context.options); |
| 56 | + // Set the response back in the context |
| 57 | + context.response = response; |
| 58 | + } catch (error) { |
| 59 | + throw error; |
| 60 | + } |
| 61 | + } |
| 62 | +} |
| 63 | +``` |
| 64 | + |
| 65 | +### Create Middleware Chain |
| 66 | + |
| 67 | +Can use own middlewares and the ones shipped with the library [[Here](../src/middleware) are the set of Middlwares shipped with the library] to create the middleware chain. Create a chain out of these one has to link them in sequentially manner in own preferred order using `.setNext()` method. |
| 68 | + |
| 69 | +Using AuthenticationHandler [one shipped with the library] and MyLoggingHandler, and MyHttpMessageHandler [custom ones] to create a middleware chain here. |
| 70 | + |
| 71 | +NOTE: Instead of MSALAuthenticationProvider, one can provide his own Authentication Handler. For more about using custom authentication provider, refer [here](./CustomAuthenticationProvider.md). |
| 72 | + |
| 73 | +```typescript |
| 74 | +import { MSALAuthenticationProvider } from "@microsoft/microsoft-graph-client"; |
| 75 | +import { MyLoggingHandler } from "./MyLoggingHandler"; |
| 76 | +import { MyHttpMessageHandler } from "./MyHttpMessageHandler"; |
| 77 | + |
| 78 | +let authProvider = new MSALAuthenticationProvider("<CLIENT_ID>", ["user.read"]); |
| 79 | +let authenticationHandler = new AuthenticationHandler(authProvider); |
| 80 | +let myLoggingHandler = new MyLoggingHandler(); |
| 81 | +let myHttpMessageHandler = new MyHttpMessageHandler(); |
| 82 | + |
| 83 | +// Note: myHttpMessageHandler is the last in the chain so there is no need of setting next middleware for it. |
| 84 | +authenticationHandler.setNext(myLoggingHandler); |
| 85 | +myLoggingHandler.setNext(myHttpMessageHandler); |
| 86 | +``` |
| 87 | + |
| 88 | +### Initialize Client |
| 89 | + |
| 90 | +Pass first middleware in the chain for initializing the client. |
| 91 | + |
| 92 | +```typescript |
| 93 | +let clientOptions: ClientOptions = { |
| 94 | + middleware: authenticationHandler |
| 95 | +}; |
| 96 | +const client = new Client(clientOptions); |
| 97 | +``` |
| 98 | + |
| 99 | +## Passing Options for Middleware |
| 100 | + |
| 101 | +One can pass any middleware specific options or data while initializing the client, this will be available in the `context.middlewareOptions`. |
| 102 | + |
| 103 | +```typescript |
| 104 | +let clientOptions: ClientOptions = { |
| 105 | + middleware: authenticationHandler, |
| 106 | + middlewareOptions: { |
| 107 | + loggingPrefix: "MSGraph-Client-Library" |
| 108 | + } |
| 109 | +} |
| 110 | +``` |
| 111 | + |
| 112 | +The above middlewareOptions object will be available in the context object that is being passed to the execute method of a middleware. |
| 113 | + |
| 114 | +```typescript |
| 115 | +// MyLoggingHandler.ts |
| 116 | +import { Middleware } from "@microsoft/microsoft-graph-client"; |
| 117 | +import { Context } from "@microsoft/microsoft-graph-client"; |
| 118 | + |
| 119 | +export class MyLoggingHandler implements Middleware { |
| 120 | + |
| 121 | + private nextMiddleware: Middleware; |
| 122 | + |
| 123 | + public async execute(context: Context): Promise<void> { |
| 124 | + try { |
| 125 | + let url: string; |
| 126 | + if (typeof context.request === "string") { |
| 127 | + url = context.request; |
| 128 | + } else { |
| 129 | + url = context.request.url; |
| 130 | + } |
| 131 | + if (context.middlewareOptions !== undefined && context.middlewareOptions.loggingPrefix !== undefined) { |
| 132 | + console.log(`${context.middlewareOptions.loggingPrefix}: ${url}`); |
| 133 | + } else { |
| 134 | + console.log(url); |
| 135 | + } |
| 136 | + await this.nextMiddleware.execute(context); |
| 137 | + } catch(error) { |
| 138 | + throw error; |
| 139 | + } |
| 140 | + } |
| 141 | + |
| 142 | + public setNext(next: Middleware): void { |
| 143 | + this.nextMiddleware = next; |
| 144 | + } |
| 145 | +} |
| 146 | +``` |
| 147 | + |
| 148 | +Refer [MiddlewareOptions](../src/IMiddlewareOptions.ts) interface to know its structure. |
0 commit comments