Vue Auth Methods Core




The set of core methods.

ready

@usage ready()

@return Boolean

Returns the current auth loading state.

Check for a valid token, then wait for any refresh and/or user fetch if enabled before being set to true.

Examples

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

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

load

@usage load()

@return Promise

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

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

Examples

<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

@usage check(role [, key])

@param Mixed 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.

The optional key string parameter supports dot notation to access a nested role key.


There are four main types of checks available:

  • "array of strings" to "array of strings"
  • "array of strings" to "string"
  • "string" to "string"
  • "object" to "object"

There is NO array of objects comparison available.

Examples

<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>

        <a
            v-if="$auth.check('admin', 'nested.key')"
        >
            nested
        </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

References

user

@usage user([data])

@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.

Examples

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

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

References

fetch

@usage fetch([data])

@param Object data

@return Promise

Execute a fetch request.

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

Examples

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

References

register

@usage register([data])

@param Object data

@return Promise

Execute a register request.

Examples

<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>

References

login

@usage login([data])

@param Object data

@return Promise

Execute a login request.

Examples

<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>

References

oauth2

@usage oauth2(type [, data])

@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.

Examples

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,
                        window: {
                            name: '_blank',
                            specs: {},
                            replace: false
                        }
                    });
            }
        }
    }
</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>

References

logout

@usage logout([data])

@param Object data

@return Promise

Execute a logout request.

Examples

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

References

impersonate

@usage impersonate([data])

@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.

Examples

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

References

unimpersonate

@usage unimpersonate([data])

@param Object data

@return Promise

Execute an unimpersonate request.

Clears out the impersonating token and restores previously used token.

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

Examples

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

References

impersonating

@usage impersonating()

@return Boolean

Check to see if in impersonating mode.

Examples

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

remember

@usage remember([data])

@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.

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

Examples

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

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

References

unremember

@usage unremember()

@return Void

Clear out the remember data.

Examples

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

redirect

@usage 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.

Examples

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

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

refresh

@usage refresh([data])

@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.

Examples

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

References

token

@usage token([name] [, token] [, expires])

@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.

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

Examples

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

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

References

disableImpersonate

@usage 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.

Examples

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

            // run as admin

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

enableImpersonate

@usage enableImpersonate()

@return Void

Enables impersonating mode.

Used to re-enable impersonating mode if previously disabled.

Examples

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

            // run as admin

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