The set of core methods.
@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.
<template>
<div>
<span
v-show="!$auth.ready()"
>
Loading...
</span>
<span
v-show="$auth.ready()"
>
Ready!
</span>
</div>
</template>
@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.
<script>
export default {
mounted() {
this.$auth
.load()
.then(() => {
if (this.$auth.check()) {
// fetch some data
}
});
this.$auth
.load()
.then(() => {
// do some more stuff
});
}
}
</script>
@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
keystring 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.
<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: '[email protected]', 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: '[email protected]', 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
@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.
<script>
export default {
computed: {
_user() {
return this.$auth.user() || {};
}
},
methods: {
update() {
this.$auth.user({
first_name: 'Rob',
last_name: 'Nova'
});
}
}
}
</script>
@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.
<script>
export default {
methods: {
fetch() {
this.$auth.fetch();
}
}
}
</script>
@usage register([data])@param Object data@return Promise
Execute a register request.
<script>
export default {
methods: {
register() {
this.$auth
.register({
body: {
email: '[email protected]',
password: 'abcd1234'
},
redirect: {name: 'user-account'},
remember: 'Rob',
staySignedIn: true,
autoLogin: true,
fetchUser: true
});
}
}
}
</script>
@usage login([data])@param Object data@return Promise
Execute a login request.
<script>
export default {
methods: {
login() {
this.$auth
.login({
body: {
email: '[email protected]',
password: 'abcd1234'
},
redirect: {name: 'user-account'},
remember: 'Rob',
staySignedIn: true,
fetchUser: true
});
}
}
}
</script>
@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.
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>
@usage logout([data])@param Object data@return Promise
Execute a logout request.
<script>
export default {
methods: {
logout() {
this.$auth
.logout({
makeRequest: true,
redirect: {name: 'auth-login'},
});
}
}
}
</script>
@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.
<script>
export default {
methods: {
impersonate(user) {
this.$auth
.impersonate({
url: 'auth/' + user.id + '/impersonate',
redirect: {name: 'user-account'},
});
}
}
}
</script>
@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.
<script>
export default {
methods: {
unimpersonate(user) {
this.$auth
.unimpersonate({
makeRequest: true,
redirect: {name: 'admin-users'},
});
}
}
}
</script>
@usage impersonating()@return Boolean
Check to see if in impersonating mode.
<template>
<div>
<a
v-if="$auth.impersonating()"
>
Unimpersonate
</a>
</div>
</template>
@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.stringifyandJSON.parseif using objects.
<template>
<div>
<div
v-if="$auth.remember()"
>
Welcome back, {{ $auth.remember() }}
</div>
</div>
</template>
<script>
export default {
methods: {
remember() {
this.$auth.remember('Rob');
}
}
}
</script>
@usage unremember()@return Void
Clear out the remember data.
<script>
export default {
methods: {
unremember() {
this.$auth.unremember();
}
}
}
</script>
@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.
<script>
export default {
methods: {
login() {
var redirect = this.$auth.redirect();
this.$auth
.login({
...
redirect: {
name: redirect ? redirect.from.name : 'user-account'
}
});
}
}
}
</script>
@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.
<script>
export default {
methods: {
refresh() {
this.$auth.refresh();
}
}
}
</script>
@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
staySignedInoption mapping directly to theexpiresparameter.
<script>
export default {
get() {
return this.$auth.token(); // default
},
set() {
this.$auth.token(null, 'MY-TOKEN_CODE', false);
}
}
</script>
@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.
<script>
export default {
fetch() {
this.$auth.disableImpersonate();
// run as admin
this.$auth.enableImpersonate();
}
}
</script>
@usage enableImpersonate()@return Void
Enables impersonating mode.
Used to re-enable impersonating mode if previously disabled.
<script>
export default {
fetch() {
this.$auth.disableImpersonate();
// run as admin
this.$auth.enableImpersonate();
}
}
</script>