Skip to content

Vuex store and axios inteceptor for seamless handeling of JWT refresh tokens

Notifications You must be signed in to change notification settings

zengoma/vuex-jwt

Repository files navigation

vuex-jwt

code style: prettier

vuex-jwt is VueJS plugin helps you seamlessly handle jwt refresh token authentication in your axios requests

Table of contents

  1. Requirements
  2. Installation
  3. Getting started
  4. Contributing

Requirements

  1. Vue: ^2.0.0
  2. Vuex: ^2.0.0 || ^3.0.0

Installation

yarn add vuex-jwt

Getting started

  1. You will need to setup a Vue project with Vuex. You should create a project with the vue-cli. For more info

  2. Initialize the JWT Plugin src/main.ts

    import Vue from "vue";
    import store from "./store";
    import JWT from "vuex-jwt";
    
    Vue.use(JWT, { store });
  3. Register the vuex-jwt auth store module

import Vue from "vue";
import Vuex from "vuex";
import { auth } from "vuex-jwt";
Vue.use(Vuex);

const store = {
  modules: {
    auth,
  }
}
  1. Define the base url in then environmental variable .env
    VUE_APP_BASE_URL="/api"
    VUE_APP_JWT_VALIDATION_PATH = "/password_reset/validate_token/"
    VUE_APP_JWT_REFRESH_PATH = "/token/refresh/"
    VUE_APP_JWT_OBTAIN_PATH = "/token/"

Authentication

Authentication #TODO: Include an example of a login and logout request

Making authenticated axios requests

In order to make custom authenticated requests in your components you can simple do this. This will automatically attach the Bearer token to your request.

this.$http.get("your-custom-endpoint")...

The axios instance can also be imported in to non Vue Components

import {http} from "vuex-jwt";

http.get("your-custom-endpoint")...

About

Vuex store and axios inteceptor for seamless handeling of JWT refresh tokens

Resources

Stars

Watchers

Forks

Packages

No packages published