Search the Knowledgebase

Search

Web JS with Vue

March 18, 2020

Prerequisites

Required client settings

As this library is designed for SPAs, make sure you have selected Client Type in your client settings as Single Page Application.

Also, ensure that Callback redirect URL and Signout redirect URL are configured in your client settings. We will use these in the next section.

Install web-js package

npm i @axioms/web-js

Vue client configuration

Grab the client key. Now, in your Vue main.js file add create Axioms configuration which looks like below. In the following snippet make sure you have replaced placeholder values (effectively anything <placeholder>).

import { Auth } from '@axioms/web-js';
const auth = new Auth({
    axioms_domain: '<placeholder>',
    response_type: 'id_token token',
    redirect_uri: '<placeholder>',
    post_logout_uri: '<placeholder>',
    client_id: '<placeholder>',
    scope: 'openid profile',
    post_login_navigate: '<placeholder>'
});

Vue.prototype.$auth = auth;

In your *.vue files refrence various web-js JavaScript functions via this. For instance,

  • To login with the redirect,
this.$auth.login_with_redirect();
  • For logout with the redirect,
this.$auth.logout_with_redirect();
  • To check if the user is authenticated or not,
this.$auth.session.is_authenticated()

In your *.js files you can access various web-js JavaScript functions via Vue.prototype. For instance,

Vue.prototype.$auth.session.is_authenticated();

Vue router guard

Using web-js, you can guard your Vue router for authenticated users. See below snippet which uses $auth.session.is_authenticated() and expects a meta.requiresAuth to be true.

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (Vue.prototype.$auth.session.is_authenticated()) {
            next()
            return
        }
        next('/login')
    } else {
        next()
    }
})

Did you find this article helpful?
0 out of 0 found this helpful
Still have questions? Open a Support Ticket

Related Stories

Arrow-up