axios interceptors for refresh token

100%

axios interceptors for refresh token

✓ Published0🌍 Public

Last edited Oct 5, 2017

Created on Aug 4, 2018

This example shows an Axios response interceptor that automatically handles expired access tokens by refreshing them when a request returns a 401 status. The code intercepts the failed request, checks the stored refresh token from `window.localStorage`, and posts it to an authentication endpoint at `localhost:8000/auth/refresh`. On success, it updates both the access and refresh tokens in local storage, sets the new authorization header for subsequent requests, and retries the original request. The implementation uses `axios.interceptors.response.use` with a `_retry` flag to prevent infinite loops, while relying on the browser’s local storage for token persistence and Axios’s promise-based API for asynchronous flow.

AI-generated description

Similar vizzes

Loading thumbnail…

How to get a new token after token expired in axios

This example shows how to automatically refresh an expired OAuth2 token in an Axios-based HTTP client and retry the original failed request. Using an Axios response interceptor, the code checks for a 401 status and a missing `_retry` flag, then posts the stored refresh token to a local backend endpoint with basic auth credentials. After dispatching the new token data to a Vuex store and updating both global and per-request Authorization headers, it re-invokes the original request configuration. The example relies on Axios interceptors, `qs.stringify` for form-encoded payloads, and Vuex getters/dispatchers for user state.

AAbhay-Joshi-Git

82% match

Loading thumbnail…

Express authentication using Redis for session store and Couchdb for database (in coffeescript!)

This example demonstrates user authentication and session management in a CoffeeScript-built Express application, showing how login, signup, and logout routes handle password hashing and session regeneration. The code uses Redis as the session store via `connect-redis` and CouchDB for user persistence through the `couchdb` client, with CSRF protection from `express-csrf` and password salting via `hash.sha1`. The visualization highlights the request flow across these middleware and database calls, including error handling for duplicate users and failed logins, while relying on the Fugue cluster for deployment.

AAnsonT

53% match

Loading thumbnail…

Gist 3413ee69199762ea0375292e47168e84

This example shows a Redux-based offline-first data visualization for a rail system, persisting station directory data to localStorage and using a service worker to cache assets for offline use. The code uses `localforage` for asynchronous storage, `axios` for fetching JSON station data, and `throttle` from Lodash to limit state saves. It demonstrates a fetch-then-cache strategy where API responses are stored locally, while the service worker intercepts network requests to serve cached resources or fall back to offline behavior. The visualization itself is not shown, but the data flow centers on storing and retrieving station directory JSON to support the application’s offline functionality.

CCKschneid

52% match

Loading thumbnail…

Gist 82e5b38e9a37eec15ec3cb5c1cf5382a

This example demonstrates how to secure Laravel AJAX requests by embedding a CSRF token in the page metadata. It shows the token being generated server-side via `{{ csrf_token() }}` and placed inside a `<meta name="csrf-token">` tag for asynchronous JavaScript calls. The code highlights that the token is unique per session and must be included in every AJAX request, though Laravel allows disabling this protection, which is not recommended. The example uses Laravel’s Blade templating syntax to inject the token into the HTML.

MMistyBlunch

51% match

Loading thumbnail…

Redux + localStorage

This example shows how to persist a Redux store in the browser’s localStorage by syncing state changes through a custom module. The code defines a reducer that handles `SET` and `REMOVE` actions, calling `serialize` to write the updated Immutable.js collection to localStorage after each mutation. On initialization, `deserialize` reads the stored JSON and hydrates the state via `Immutable.Map`. Access to stored values uses memoized `reselect` selectors, while action creators `set` and `remove` trigger updates. The implementation relies on Redux’s reducer/action pattern and the browser’s `localStorage` API.

RRestuta

51% match

Loading thumbnail…

Gist fdfeb2b6c1c7c936cff968552d66277f

This example visualizes the flow of a failed HTTP request within a Node.js application, tracking the error from its initial 403 response through the complete async call stack. The visualization uses a structured log-and-trace rendering approach, where each line of the stack trace is displayed as a sequential node in a vertical flow diagram. The code relies on axios for making the POST request to the `/api/v1/Challenges` endpoint and Node’s built-in async/await pattern to propagate the error through layers like `ChallengeClient`, `ChallengeController`, and `AccountController`. The screenshot shows the raw error object with its nested `config` and `requestId` metadata.

HHoffmannP

49% match

Loading thumbnail…

Simplest Passport/JWT implementation with cookie and bearer authentication support

This example demonstrates a minimal JSON Web Token (JWT) authentication flow using Passport.js, supporting both HTTP-only signed cookies and bearer tokens in the Authorization header. It shows registration, login, and a protected `/secret` route, with user credentials hashed via bcrypt and tokens signed by `jsonwebtoken`. The code relies on `passport-jwt`’s `ExtractJwt.fromExtractors` to combine a custom cookie extractor with `fromAuthHeaderAsBearerToken`. The in-memory `Users` class stores user data and validates passwords asynchronously, while the server uses Express, `body-parser`, and `cookie-parser` for request handling.

AAnsonT

47% match

Loading thumbnail…

Gist ca8ce8dbd8dbba7b501860f3d569f019

This example demonstrates a lightweight Express server that acts as a CORS proxy for a joke API, enabling browser-based requests to bypass cross-origin restrictions. The code uses the `express` and `request` libraries to define a route, `/jokes/random`, which forwards requests to `https://joke-api-strict-cors.appspot.com/jokes/random` and relays the JSON response back to the client. A middleware sets the `Access-Control-Allow-Origin` header to `*`, allowing any frontend to access the proxied data. The server listens on a configurable port, defaulting to 3000, and handles errors by returning a JSON error object. This setup illustrates a simple server-side solution for enabling client-side data fetching from a restricted external source.

115Dkatz

46% match