User vuex module

Implement

Install

yarn add @dynapp/webc-api-user

Setup

router.js

import Router from 'vue-router'
import store from './store'

Vue.use(Router);

const router = new Router({
  routes: []
});
router.beforeEach((to, from, next) => {
  store.dispatch('user/checkRouteAccess', {to, from, next});
});

export default router;

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createUserModule from '@dynapp/webc-api-user'

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user: createUserModule()
  }
});

view/component script

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    loginStatus () {
      return this.$store.getters['user/loginStatus'];
    }
  },
  methods: {
    login () {
      this.$store.dispatch('user/login', {
        username: this.username,
        password: this.password
      }).then(() => {
        // Login successful, do something
      });
    }
  }
}

API

Options

Options are passed as a dictionary to the createUserModule funcction.

• oidc-login: Boolean Whether app should use oidc (open id connect) login, aka. single sign on or not. Default is false.
• mode: String The current development mode. Defaults to process.env.NODE_ENV if it's available, otherwise defaults to development.

Getters

user/currentUser

Get current user

this.$store.getters['user/currentUser'];

user/loginStatus

Get current login status

Possible values are:

• INVALID - Attempted login but server responded with 401
• PENDING - A request to log in, or out, is in the air
• LOGGED_IN - Logged in
• LOGGED_OUT - Logged out

this.$store.getters['user/loginStatus'];

user/hasRole

Check if user has role. Returns a function that expects a role to be passed. Returns a Boolean.

this.$store.getters['user/hasRole']('<some_role>');

Actions

user/checkRouteAccess

Used in router.beforeEach. Takes a dictionary with router.beforeEach's parameters as parameter.

If user is tagged as logged in locally it just lets him/her through to next route. If not, a check is made if the user has a session on the server. If the user don't have a session the user is taken to the login view.

store.dispatch('user/checkRouteAccess', {to, from, next});

user/login

Make a login request to the server. Returns a Promise.

this.$store.dispatch('user/login', {
	username: this.username,
	password: this.password
});

user/logout

Make a logout request to the server. Returns a Promise.

this.$store.dispatch('user/logout');

user/changePassword

Make a request to change the currently logged in user's password.

Commits loading changes on topic user.changepassword.

Returns a Promise.

this.$store.dispatch('user/changePassword', {
  password: this.oldPassword,
  new_password: this.newPassword
});

Project setup

yarn install

Lint and fix files

yarn run lint