@devupx/vue-auth

A simple authentication and authorization library for Vue.js using typescript.

Usage no npm install needed!

<script type="module">
  import devupxVueAuth from 'https://cdn.skypack.dev/@devupx/vue-auth';
</script>

README

:key: Vue Auth Plugin

A simple authentication and authorization library for Vue.js using typescript.

This project is inspired by @d0whc3r/vue-auth-plugin, the reason I rewrite this plugin, is to standardize auth method.

Pull requests and issues are welcome

Features

  • Support of refreshToken

  • Standard use of browser storage: sessionStorage for accessToken and localStorage for refreshToken

  • No cookieStorage

:notebook: Note

Server should return

{
    "access_token": "thetoken",
    "refresh_token": "thetoken"
}

access and refresh token's names can be customized.

Cannot customize fetchData methods anymore.

:rocket: Install

npm install -S @devupx/vue-auth

:notebook: Documentation and Usage

https://vue-auth-plugin.netlify.app

Note:

  • Some options have been changed

  • Role has been remove, because we can find out user's role in user info after fetch user data.

Example of options:

{
  authMeta: 'auth',
  tokenDefaultName: 'default_auth_token',
  userDefaultName: 'default_auth_user',
  headerTokenReplace: '{auth_token}',
  tokenType: 'Bearer',
  vuexStoreSpace: 'vue-auth', // vuex store name
  authRedirect: '/login', // page when you need
  tokenName: { // tokens' name
    accessName: 'access_token',
    refreshName: 'refresh_token'
  },
  loginData: {
    url: '/auth/login',
    method: 'POST',
    redirect: undefined,
    fetchUser: true // enable to fetch user info after login
  },
  registerData: {
    url: '/auth/register',
    method: 'POST',
    redirect: undefined,
    fetchUser: true // enable to fetch user info after register
  },
  logoutData: { redirect: '/login' },
  fetchData: { url: '/auth/me', method: 'GET', interval: 30 }, // fetch user info every [interval] minutes
  refreshData: { // refresh access_token every [interval] minutes
    url: '/auth/refresh',
    method: 'GET',
    interval: 30,
    enabled: true
  }
}

Next step

Standardize role methods in router meta.

:copyright: License

Plugin created using vue-cli 4 and p11n plugin

MIT

:bookmark: Keywords

vue, auth, authorization, authentication, login, vuejs, vue2, typescript