Skip to content

Latest commit

 

History

History
88 lines (62 loc) · 1.97 KB

README.md

File metadata and controls

88 lines (62 loc) · 1.97 KB

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