Home Posts GitHub Menu

Vue Auth Methods Examples



Notes and example of all vue-auth plugin methods.

NOTE: Both Vue.auth and this.$auth are available and will point to the same auth instance.

ready()

@return Boolean

Returns the current auth loading state.

This will check and for a valid token, and wait for any refresh and user fetch if enabled before being set to true.

Example:

<template>
    <div>
        <span
            v-show="!$auth.ready()"
        >
            Loading...
        </span>

        <span
            v-show="$auth.ready()"
        >
            Ready!
        </span>
    </div>
</template>

load()

@return Promise

This works similar to the ready() method except it returns a Promise which can be used for further processing.

NOTE: Multiple Promise .load().then() chains can be created.

Example:

<script>
    export default {
        mounted() {
            this.$auth
                .load()
                .then(() => {
                    if (this.$auth.check()) {
                        // fetch some data
                    }
                });

            this.$auth
                .load()
                .then(() => {
                    // do some more stuff
                });
        }
    }
</script>

check()

@param String role
@param String key
@return Boolean

Check to see if a user is logged in.

It accepts a role parameter to check for specific role access. The additional key parameter is to specify the roles field to check against on the user object if different from the default one set in options.rolesKey.

Resources:

Example:

<template>
    <div>
        <a
            v-if="!$auth.check()"
        >
            login
        </a>

        <a
            v-if="$auth.check('admin')"
        >
            admin
        </a>

        <a
            v-if="$auth.check(['admin', 'manager'])"
        >
            manage
        </a>
    </div>
</template>

General String and Array comparisons.

this.$auth.user();

// {id: 1, email: 'admin@example.com', roles: 'admin'}

this.$auth.check('admin');           // true
this.$auth.check('user');            // false
this.$auth.check(['admin', 'user']); // true
this.$auth.check('admin', 'blah');   // false

The check can also do Object to Object comparisons.

this.$auth.user();

// {id: 1, email: 'admin@example.com', roles: {team: 'view', boards: ['view', 'edit']}}

this.$auth.check({team: 'edit'});             // false
this.$auth.check({team: 'view'});             // true
this.$auth.check({boards: 'edit'});           // true
this.$auth.check({boards: ['edit', 'view']}); // true

user()

@param Object data
@return Object|Null

Returns the user object or null if not yet set.

This can also be used to manually set the user data by passing in an object.

Resources:

Example:

<script>
    export default {
        computed: {
            _user() {
                return this.$auth.user() || {};
            }
        },

        methods: {
            update() {
                this.$auth.user({
                    first_name: 'Rob',
                    last_name: 'Nova'
                });
            }
        }
    }
</script>

fetch()

@param Object data
@return Promise

Execute a fetch request.

Manually fetches the user data. Sometimes useful to pull a fresh set of user data.

Resources:

Example:

<script>
    export default {
        methods: {
            fetch() {
                this.$auth.fetch();
            }
        }
    }
</script>

register()

@param Object data
@return Promise

Execute a register request.

Resources:

Example:

<script>
    export default {
        methods: {
            register() {
                this.$auth
                    .register({
                        body: {
                            email: 'hello@example.com',
                            password: 'abcd1234'
                        },
                        redirect: {name: 'user-account'},
                        remember: 'Rob',
                        staySignedIn: true,
                        autoLogin: true,
                        fetchUser: true
                    });
            }
        }
    }
</script>

login()

@param Object data
@return Promise

Execute a login request.

Resources:

Example:

<script>
    export default {
        methods: {
            login() {
                this.$auth
                    .login({
                        body: {
                            email: 'hello@example.com',
                            password: 'abcd1234'
                        },
                        redirect: {name: 'user-account'},
                        remember: 'Rob',
                        staySignedIn: true,
                        fetchUser: true
                    });
            }
        }
    }
</script>

oauth2()

@param String type
@param Object data
@return Promise

Execute an oauth2 request.

It's important to note that there are actually two separate parts to this process. The initial request (to Facebook, etc) is made to accept permissions for the app and generate a token. That token is then sent back to the app. At that point the app should generate a request to the api to then fetch the "social" user data and create a user.

Resources:

Example:

The initial request to FB, Google, etc.

<script>
    export default {
        methods: {
            oauth2() {
                this.$auth
                    .oauth2({
                        params: {
                            client_id: 'FACEBOOK_CLIENT_ID'
                            ...
                        },
                        remember: 'Rob',
                        staySignedIn: true,
                        fetchUser: true
                    });
            }
        }
    }
</script>

The second request to trigger the API call must set code to true.

<script>
    export default {
        methods: {
            oauth2() {
                this.$auth
                    .oauth2({
                        code: true,
                        redirect: {name: 'user-account'},
                        state: this.$route.query.code,
                        body: {
                            token: this.$route.query.code
                        }
                    });
            }
        }
    }
</script>

logout()

@param Object data
@return Promise

Execute a logout request.

Resources:

Example:

<script>
    export default {
        methods: {
            logout() {
                this.$auth
                    .logout({
                        makeRequest: true,
                        redirect: {name: 'auth-login'},
                    });
            }
        }
    }
</script>

impersonate()

@param Object data
@return Promise

Execute an impersonate request.

This will likely require the id of the user to impersonate to somehow to be passed to the API.

Resources:

Example:

<script>
    export default {
        methods: {
            impersonate(user) {
                this.$auth
                    .impersonate({
                        url: 'auth/' + user.id + '/impersonate',
                        redirect: {name: 'user-account'},
                    });
            }
        }
    }
</script>

unimpersonate()

@param Object data
@return Promise

Execute an unimpersonate request.

Clears out the impersonating token and restores previously used token.

NOTE: This does not store multiple data sets, it only stores the tokens.

Resources:

Example:

<script>
    export default {
        methods: {
            unimpersonate(user) {
                this.$auth
                    .unimpersonate({
                        makeRequest: true,
                        redirect: {name: 'admin-users'},
                    });
            }
        }
    }
</script>

impersonating()

@return Boolean

Check to see if in impersonating mode.

Example:

<template>
    <div>
        <a
            v-if="$auth.impersonating()"
        >
            Unimpersonate
        </a>
    </div>
</template>

remember()

@param Object data
@return String|Null

Returns the "remember" data or null if not set.

This can also manually set the remember data which is automatically used by the login, register and oauth2 methods when using the remember option.

Intended use is to set some data such as a name for when a user returns the page and is logged out. For example we may want to show "Welcome back, Rob" if the remember data is set.

NOTE: This must set a string and should use JSON.stringify and JSON.parse if using objects.

Resources:

Example:

<template>
    <div>
        <div
            v-if="$auth.remember()"
        >
            Welcome back, {{ $auth.remember() }}
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            remember() {
                this.$auth.remember('Rob');
            }
        }
    }
</script>

unremember()

@return Void

Clear out the remember data.

Example:

<script>
    export default {
        methods: {
            unremember() {
                this.$auth.unremember();
            }
        }
    }
</script>

redirect()

@return Object|Null

Returns redirect caused by the vue-auth plugin.

This includes a status code to indicate what caused the redirect. This is useful for cased where a login redirect has occurred or even for debugging.

Example:

<script>
    export default {
        methods: {
            login() {
                var redirect = this.$auth.redirect();

                this.$auth
                    .login({
                        ...
                        redirect: {
                            name: redirect ? redirect.from.name : 'user-account'
                        }
                    });
            }
        }
    }
</script>

refresh()

@param Object data
@return Promise

Execute a refresh request.

This is used for refreshing the user token. Use the fetch() method to re-fetch the actual user data instead.

Resources:

Example:

<script>
    export default {
        methods: {
            refresh() {
                this.$auth.refresh();
            }
        }
    }
</script>

token()

@param String name
@param String token
@param Boolean expires
@return String|Null

Returns the token data or null if not set.

Can also be used to manually set a token.

If the name parameter is not specified it will use the default. The token parameter is used if setting rather than fetching a token. The optional expires parameter specifies whether token should remain after the browser is closed or not.

NOTE: The token is automatically stored when logging in with the staySignedIn option mapping directly to the expires parameter.

Resources:

Example:

<script>
    export default {
        get() {
            return this.$auth.token(); // default
        },

        set() {
            this.$auth.token(null, 'MY-TOKEN_CODE', false);
        }
    }
</script>

disableImpersonate()

@return Void

Disables impersonating mode.

Used to temporary disable impersonating mode in case we need to fire a request withe the "admin" user while impersonating.

Example:

<script>
    export default {
        fetch() {
            this.$auth.disableImpersonate();

            // run as admin

            this.$auth.enableImpersonate();
        }
    }
</script>

enableImpersonate()

@return Void

Enables impersonating mode.

Used to re-enable impersonating mode if previously disabled.

Example:

<script>
    export default {
        fetch() {
            this.$auth.disableImpersonate();

            // run as admin

            this.$auth.enableImpersonate();
        }
    }
</script>