Vue Auth
Upgrades
2.x to 3.x
For the most part the plugin should be fully backwards compatible with a few exceptions.
There are a handful of breaking changes which are outlined below. The rest are add-ons and internal updates.
Upgrade time: 10 to 20 minutes.
New options.cookie
object parameter added to allow for custom cookie paramaters.
For instance the default cookie
option below which can be extended/overridden as need be.
cookie: {
Path: '/',
Domain: null,
Secure: true,
Expires: 12096e5,
SameSite: 'None',
},
Check the Cookies Guide for more details.
Calling $auth.user()
will now return null
if not set.
To ensure proper reactivity, this will now return null
rather an empty ({}
) object if not set.
No more success/error callbacks.
These have been completely removed and now return a Promise.
This applies to:
$auth.load()
$auth.login()
$auth.register()
$auth.fetch()
$auth.refresh()
$auth.logout()
$auth.impersonate()
$auth.unimpersonate()
$auth.oauth2()
Requests will now correctly chain in situations such as with a login and subsequent fetch request.
Instead of:
this.$auth
.login({
body: body,
rememberMe: true,
success() => {},
error() => {}
});
Use then
:
this.$auth
.login({
body: data,
rememberMe: true,
})
.then(() => {
// success
}, () => {
// error
});
The $auth.ready()
function no longer accepts a callback.
The ready function now simply returns true/false.
Use $auth.load()
instead for this which returns a Promise.
The
$auth.load().then()
can be called multiple times.
Instead of:
this.$auth
.ready(() => {
// do some stuff
});
Use load
and then
:
this.$auth
.load()
.then(() => {
// do some stuff
});
New $auth.load()
function.
This replaces the $auth.ready()
callback.
These can be used multiple times.
this.$auth
.load()
.then(() => {
// Do something.
});
this.$auth
.load()
.then(() => {
// Do something again
});
The "remember me" functionality has changed.
This has been modified to add more granularity for what "remember me" may actually mean to the app.
- The
rememberMe
flag has been renamed toremember
. - The new
remember
flag has been repurposed to accept aString
value for the purpose of storing some basic info like a users name for subsequent logins. - Use
staySignedIn
to retain usage of the old 'rememberMe' flag.
Instead of:
this.$auth
.login({
rememberMe: true
});
Use staySignedIn
instead:
this.$auth
.login({
staySignedIn: true
});
Use remember
for data:
this.$auth
.login({
staySignedIn: true,
remember: JSON.stringify({name: 'Rob'})
});
New "staySignedIn" flag has been added to login.
This is also now part of the loginData
default options and defaults to a true
value.
Check above for more notes on this.
this.$auth
.login({
staySignedIn: true
});
New $auth.remember()
function.
This will return the data stored in the remember
store when using remember
flag on login.
this.$auth
.login({
staySignedIn: true,
remember: JSON.stringify({name: 'Rob'})
});
var name = JSON.parse(this.$auth.remember() || '{}').name;
var msg = name ? 'Welcome back,' + name : '';
Or just keep it simple.
this.$auth
.login({
staySignedIn: true,
remember: 'Rob'
});
var name = this.$auth.remember();
var msg = name ? 'Welcome back, ' + name : '';
New $auth.unremember()
function.
This will clear out the remember
store data.
this.$auth.unremember();
Simplified "OAuth2" setup.
There is now only one oauth2Data
options object that will be used as a general case.
A drivers/oauth2
folder has been added and ships with Facebook and Google drivers.
The $auth.oauth2()
call remains however the options are a bit different depending on the call.
Check the OAuth2 Guide for more details.
The sessionStorage
option for tokenStore
has been removed.
This has been removed and merged with localStorage
to simplify things.
Check the Tokens Guide for more details.
More notes below on storage and tokens.
The localStorage
option for tokenStore
has been renamed to storage
.
This has been merged with sessionStorage
into one simplified storage
option.
This will automatically work with staySignedIn
to set the appropriate expiration when storing the token.
With staySignedIn
set to true
it would use localStorage
while with a false
value, it will use sessionStorage
.
With the cookie storage we can expect same behavior as before with cookies being set and expired accordingly.
Calling $auth.login()
will attempt to set user if fetchUser
is disabled.
If the user data is already returned on a successful login the user can be loaded right away without doing a fetch.
This will use same parser as with the
fetch
call.
this.$auth
.login({
fetchUser: false
})
.then(() {
// Do something.
});
Token name options renamed.
The tokenDefaultName
and tokenImpersonateName
options have been renamed to tokenDefaultKey
and tokenImpersonateKey
respectively.
Token Store option renamed.
The tokenStore
option has been rename to stores
.
Added staySignedInKey
to options.
This is in case the storage name needs to be changed when saving the staySignedIn selection during login.
No more underscore prefix on driver functions.
This applies to http
and router
drivers.
This was quite unnecessary so have removed it.
Update to ES6 imports.
The source files now use ES6 import / export syntax.
Internal function renaming.
Lots of functions have been renamed to follow a more consistent naming pattern.
Lib clean up.
The libraries here have been cleaned up to be a much more consistent naming scheme.
Removed internal function exposing.
A lot of internal functions were exposed via the options
. This was intended to allow overriding various parts of the plugin.
This has been removed to keep things simpler.