vuex-jwt

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

   • Create a Vue project
   • Vuex setup

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,
  }
}

3. 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")...