Vue auth plugin (for jwt with fixed payload schema)

Description

Works with the following schema:

{
    "sessionId": 1,
    "userId": 1,
    "domainPermissions": [
        "DoDomainStuffOne"
    ],
    "groups": [
        {
          "groupId": 1,
          "groupPermissions": [
              "DoGroupStuffOne",
              "DoGroupStuffTwo"
            ]
        },
        {
          "groupId": 2,
          "groupPermissions": [
              "DoGroupStuffOne"
          ]
        }
    ]
}

Use cases:

• For a simple app, without any roles or permissions:

  • userId is enough in the token
  • even sessionId is needless, in case of a stateless implementation
  • $isAuthenticated() method will do the job

• If only roles are enough (e.g. admin/user):

  • define simple permissions: "DefaultUserPermissions", "DefaultAdminPermissions"
  • $hasPermission('DefaultAdminPermissions') can add extra complexity

• In case roles and permissions are both used, roles should never be directly accessed anyway

  • use them on the server side to load the permissions
  • and again $hasPermission('DeleteSomething') will work

• In case of working with roles, permissions and groups:

  • Even if a user has different permissions for different groups
  • $hasGroupPermission("AdminGroup") (without specifying the group)
  • or $hasGroupPermission("AdminGroup", 1) (with the groupId) can handle auth

Usage

Install in your VueJS project:

npm i -s tb-vue-auth

Import and install in main.js:

import AuthPlugin from 'tb-vue-auth'

Vue.use(AuthPlugin)

And you are good to go!

Examples:

• In a template:

<template>
  <div v-for="user in users">
    <span>{{ user.name }}</span>
    <span>{{ user.age }}</span>
    <button @click="loadMoreData(user.id)">Info</button>
    <button @click="deleteUser(user.id)" v-if="$hasPermission('DeleteUser')">Delete</button>
  </div>
</template>

• In code:

methods: {
  getAllTodos: function() {
    let path = this.$hasPermission('ViewAllTodos') ? "/api/todos/all" : '/api/todos/my'
    new HttpClient().get(path)
      .then( /* handle response */ )
      .catch( /* handle error */ )
  }
}

• or

created() {
  if (!this.$isAuthenticated) {
    /* navigate to login page */
  }
}

Set the user after login:

methods: {
  loginProcess: function(username, password) {
    this.loginProcess({ username, password })
      .then((response) => {
        if (response.token) {
          // Plugin method! use to update the user with the raw token
          this.$setUser(token)
          // Navigate or reload - user is not (yet...) reactive - future dev my come
        } else {
          /* alert somehow */
        }
      })
      .catch(/* handle server error or something */)
  }
}

And the same rules apply for logout:

// should be called after logout
// reload or full navigation is required
this.$deleteUser()