All Projects → sandrinodimattia → axios-token-interceptor

sandrinodimattia / axios-token-interceptor

Licence: MIT License
An interceptor which makes it easier to work with tokens in axios.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to axios-token-interceptor

Auth Module
auth.nuxtjs.org
Stars: ✭ 1,624 (+4676.47%)
Mutual labels:  axios, token
reactjs-login-register-crud
ReactJS CRUD Application, ReactJS FileUpload, ReactJS Sample application, ReactJS Boilerplate, ReactJS Login, ReactJS FileUpload, ReactJS Register
Stars: ✭ 47 (+38.24%)
Mutual labels:  axios, token
tongyimall
高仿小米商城用户端,是Vue + SpringBoot的前后端分离项目,包括首页门户、商品分类、首页轮播、商品展示、购物车、地址管理等部分。管理端在另一个仓库。
Stars: ✭ 55 (+61.76%)
Mutual labels:  axios, token
Axios Module
Secure and easy axios integration with Nuxt.js
Stars: ✭ 998 (+2835.29%)
Mutual labels:  axios, token
jooger.me
👍 My personal website,powered by @nuxt
Stars: ✭ 39 (+14.71%)
Mutual labels:  axios, axios-instance
react-mobx-router4-axios
react + less + webapck config + mobx(store)+ axios + router4
Stars: ✭ 24 (-29.41%)
Mutual labels:  axios
sherlock
🔎 Find usernames across social networks.
Stars: ✭ 47 (+38.24%)
Mutual labels:  axios
brauzie
Awesome CLI for fetching JWT tokens for OAuth2.0 clients
Stars: ✭ 14 (-58.82%)
Mutual labels:  token
tua-api
🏗 一款可配置的通用 api 请求函数生成工具(A common tool helps converting configs to api functions)
Stars: ✭ 34 (+0%)
Mutual labels:  axios
AspNetCore.Weixin
An ASP.NET Core middleware for Wechat/Weixin message handling and apis. (微信公众平台/接口调用服务)
Stars: ✭ 24 (-29.41%)
Mutual labels:  token
ItroublveTSC
Official Source of ItroublveTSC, totally open source. No virus or anything. Feel free to have a look :)
Stars: ✭ 82 (+141.18%)
Mutual labels:  token
reddit-clone
Full stack Reddit clone with nodejs and react native.
Stars: ✭ 69 (+102.94%)
Mutual labels:  axios
bilibili-vue
vue实战bilibili仿站:vue + vue router + vuex + axios
Stars: ✭ 78 (+129.41%)
Mutual labels:  axios
react-admin-nest
React和Ant Design和 Nest.js 和 Mysql 构建的后台通用管理系统。持续更新。
Stars: ✭ 123 (+261.76%)
Mutual labels:  axios
horse-jwt
Middleware for JWT in HORSE
Stars: ✭ 39 (+14.71%)
Mutual labels:  token
trivin
⚡️Setup your entire project quickly and easily with 1-line command ⚡️
Stars: ✭ 58 (+70.59%)
Mutual labels:  axios
fetchx
Beautiful way to fetch data in React
Stars: ✭ 71 (+108.82%)
Mutual labels:  axios
tsrpc
A TypeScript RPC framework, with runtime type checking and serialization, support both HTTP and WebSocket. It is very suitable for website / APP / games, and absolutely comfortable to full-stack TypeScript developers.
Stars: ✭ 866 (+2447.06%)
Mutual labels:  axios
crowdsale-smart-contract
No description or website provided.
Stars: ✭ 39 (+14.71%)
Mutual labels:  token
yii2-jwt-user
JWT (JSON Web Token) User component for Yii 2
Stars: ✭ 16 (-52.94%)
Mutual labels:  token

Axios Token Interceptor

An interceptor which makes it easier to work with tokens in axios.

Usage

const tokenProvider = require('axios-token-interceptor');

const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Configure the provider with the necessary options.
const options = { ... };
instance.interceptors.request.use(tokenProvider(options));

// When a call to an endpoint is made, a token will be provided as a header.
instance.get('/foo')

Providing a token

There are different ways to provide a token. You can provide the token as a static value:

instance.interceptors.request.use(tokenProvider({
  token: 'abc'
}));

// This will send the "Authorization: Bearer abc" header when making the call to the API endpoint.
instance.get('/foo')

Instead of providing a static value you can also use a method to get the token:

instance.interceptors.request.use(tokenProvider({
  getToken: () => localStorage.get('access_token')
}));

// This will send the "Authorization: Bearer ..." header when making the call to the API endpoint.
instance.get('/foo')

And this method can also return a promise:

instance.interceptors.request.use(tokenProvider({
  getToken: () => someMethod()
    .then(response => response.access_token);
}));

// This will send the "Authorization: Bearer ..." header when making the call to the API endpoint.
instance.get('/foo')

Customizing the Header

The following options allow you to set the header and the header value:

instance.interceptors.request.use(tokenProvider({
  token: 'abc',
  header: 'X-Api-Key',
  headerFormatter: (token) => 'token/' + token,
}));

// This will send the "X-Api-Key: token/abc" header when making the call to the API endpoint.
instance.get('/foo')

Caching

In cases where getting a token is an expensive operation (eg: exchanging a refresh token for an access token) you'll want to cache this work for as long as the token is valid.

The following example shows how we can cache tokens for 8 hours:

const cache = tokenProvider.tokenCache(
  getTokenFromAuthorizationServer().then(res => res.body.access_token),
  { maxAge: ms('8h') }
);

instance.interceptors.request.use(tokenProvider({
  getToken: cache
}));

Now it could also be that the token itself contains the expiration time (this is typically expires_in you'll get from your Authorization Server). In that case you can also use this to configure the maximum age of the cache:

const cache = tokenProvider.tokenCache(
  () => getTokenFromAuthorizationServer().then(res => res.body),
  { getMaxAge: (body) => body.expires_in * 1000 }
);

instance.interceptors.request.use(tokenProvider({
  getToken: cache,
  headerFormatter: (body) => 'Bearer ' + body.access_token,
}));

And the cache can also be reset:

const cache = tokenProvider.tokenCache(
  getTokenFromAuthorizationServer().then(res => res.body),
  { getMaxAge: (res) => res.expires_in * 1000 }
);

cache.reset();

Note that expires_in coming from your authorization server is expressed in seconds, so you'll need to convert it to milliseconds when returning it to the getMaxAgefunction.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].