Merge pull request #13 from kirillplatonov/request-interceptor

Add request interceptor support

Author: marcelolx

README.md

@@ -44,10 +44,28 @@ import { Turbo } from "@hotwired/turbo-rails"
 window.Turbo = Turbo
 ```
 
+#### Request Interceptor
+
+To authenticate fetch requests (eg. with Bearer token) you can use request interceptor. It allows pausing request invocation for fetching token and then adding it to headers:
+
+```javascript
+import { RequestInterceptor } from '@rails/request.js'
+// ...
+
+// Set interceptor
+RequestInterceptor.register(async (request) => {
+  const token = await getSessionToken(window.app)
+  request.addHeader('Authorization', `Bearer ${token}`)
+})
+
+// Reset interceptor
+RequestInterceptor.reset()
+```
+
 # Known Issues
 
 `FetchRequest` sets a `"X-Requested-With": "XmlHttpRequest"` header. If you have not upgraded to Turbo and still use `Turbolinks` in your Gemfile, this means
-you will not be able to check if the request was redirected. 
+you will not be able to check if the request was redirected.
 
 ```js
   const request = new FetchRequest('post', 'localhost:3000/my_endpoint', { body: { name: 'Request.JS' }})

src/fetch_request.js

@@ -1,4 +1,5 @@
 import { FetchResponse } from './fetch_response'
+import { RequestInterceptor } from './request_interceptor'
 import { getCookie } from './lib/cookie'
 
 export class FetchRequest {
@@ -9,6 +10,14 @@ export class FetchRequest {
   }
 
   async perform () {
+    try {
+      const requestInterceptor = RequestInterceptor.get()
+      if (requestInterceptor) {
+        await requestInterceptor(this)
+      }
+    } catch (error) {
+      console.error(error)
+    }
     const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions))
     if (response.unauthenticated && response.authenticationURL) {
       return Promise.reject(window.location.href = response.authenticationURL)
@@ -18,6 +27,12 @@ export class FetchRequest {
     }
   }
 
+  addHeader (key, value) {
+    const headers = this.additionalHeaders
+    headers[key] = value
+    this.options.headers = headers
+  }
+
   get fetchOptions () {
     return {
       method: this.method.toUpperCase(),

src/index.js

@@ -1,4 +1,5 @@
 import { FetchRequest } from './fetch_request'
 import { FetchResponse } from './fetch_response'
+import { RequestInterceptor } from './request_interceptor'
 
-export { FetchRequest, FetchResponse }
+export { FetchRequest, FetchResponse, RequestInterceptor }

src/request_interceptor.js

@@ -0,0 +1,13 @@
+export class RequestInterceptor {
+  static register (interceptor) {
+    this.interceptor = interceptor
+  }
+
+  static get () {
+    return this.interceptor
+  }
+
+  static reset () {
+    this.interceptor = undefined
+  }
+}