@uam/vuejs-user
v0.14.14
Published
Vuejs user plugin
Downloads
93
Readme
Vuejs user
Installation
via npm
npm install @uam/vuejs-uservia yarn
yarn add @uam/vuejs-userUsage
Provided components are built on Bootstrap 4 so install bootstrap 4 as stated here.
For Font Awesome icons, add following to <head> :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">Install Vuejs user module as follows:
# main.js
import userPlugin from '@uam/vuejs-user'
import Profile from './models/Profile'
import User from './models/User'
let logoutCallback = () => {
store.dispatch('beforeLogout')
}
let apiRoutes = {
login: '/login',
logout: '/logout',
requestPasswordReset: '/request-password-reset',
profile: '/profile',
refresh: '/login/refresh',
signup: '/signup',
updatePassword: '/user/change-password'
}
let routes = {
login: 'login',
logout: 'login', // route to go after logout
profile: 'profile'
}
// key is credential param used by user plugin, value is param needed by backend
let credentialsParamMapper = {
username: 'email'
}
let profileModel = new Profile()
let userModel = new User()
Vue.use(
userPlugin,
{
apiRoutes,
axios,
credentialsParamMapper,
logoutCallback,
profileModel,
router,
store,
userModel,
vueAuthenticateOptions,
}
)Options
| Option | Description | Type | Default Value |
|:-----------------------|:----------------------------------------------|:---------|:--------------------|
| apiRoutes | API endpoints related to user authentication | Object | |
| axios | The instance of axios used by app | Object | |
| credentialsParamMapper | Overridden credential keys to API keys mapper | Object | |
| loginRouteName | The name of the login route | String | 'login' |
| logoutCallback | Callback to invoke while logging out | String | |
| profileModel | The stub instance of profile model | Object | UAMProfile object |
| redirectAfterLogout | The name of route to redirect to after user logs out | String | 'home' |
| router | The registered router instance | Object | |
| store | The Vuex store to use | Object | |
| userModel | The stub instance of user model | Object | UAMUser object |
| vueAuthenticateOptions | Social login provider options | Object | |
Route meta fields
This plugin uses following meta fields in beforeEach guard of router instance.
These can be specified when defining a route in the app
| Meta field key | Description | Type | Value |
|:-----------------|:-----------------------------------------------------------------------------------|:--------|:-------|
| redirectOnExpire | Redirect to loginRouteName when both access token and refresh token gets expired | Boolean | true |
| requiresAuth | Make route accessible to only authenticated user. Redirects to loginRouteName when user is not logged in. | Boolean | true |
Social login
For social login, install and setup vue-authenticate in your app as follows:
# main.js
let vueAuthenticateOptions = {
baseUrl: process.env.API_BASE_URL, // API domain
providers: {
facebook: {
clientId: process.env.FACEBOOK_CLIENT_ID,
redirectUri: window.location.origin + '/'
},
github: {
clientId: process.env.GITHUB_CLIENT_ID,
redirectUri: window.location.origin
},
google: {
clientId: process.env.GOOGLE_CLIENT_ID,
redirectUri: window.location.origin
},
linkedin: {
clientId: process.env.LINKEDIN_CLIENT_ID,
redirectUri: window.location.origin
}
}
}
Vue.use(User, { store, router, loginRouteName: 'login', vueAuthenticateOptions, axios })
Configure client ID of each platform that you want to enable on config/{environment}.env.js of your app.
Then you can render login component with various social login links by passing respective prop as follows:
<uam-login facebook github google linkedin></uam-login>For login form on modal dialog
When mounting component if refresh token is expired(with Vue.$uamAuth.isRefreshExpired()) or on axios request if error occurs with 401 Unauthorized status, you can authenticate using uam-login component as modal body inside your modal.
You can set no-redirect prop to remain on current page after logging through modal dialog.
You can listen to login:success event and handle closing modal dialog, re-requesting endpoint etc. on your event handler.
<uam-login @login:success="hideLoginModal" no-redirect></uam-login>Component Reference
<uam-login>
Properties
| Property | Description | Type | Default Value |
|:------------|:--------------------------------------|:--------|:----------------------------------|
| facebook | Facebook login button | Boolean | false |
| github | Github login button | Boolean | false |
| google | Google login button | Boolean | false |
| linkedin | Linkedin login button | Boolean | false |
| redirect | Route to redirect to after login. false for no redirect. | Boolean, Object, String | 'home' |
| requestPasswordReset | Password reset request route. false to not show link | Boolean, Object, String | 'request_password_reset' |
| showPasswordButton | Display password button | Boolean | false |
| title | Title to show as heading | String | translated user.login.title key |
Events
| Event | Description | |:--------------|:-----------------------------------| | login:error | emits after error while logging in | | login:start | emits before invoking login | | login:success | emits after successful login |
<uam-profile>
Properties
| Property | Description | Type | Default Value | |:-------------|:---------------------------------------|:--------|:--------------| | max-password | Maximum password length | Number | 255 | | min-password | Minimum password length | Number | 6 | | update-url | API url to update current user profile | String | |
Events
| Event | Description | |:-------------------|:-------------------------------------------------------| | before-update | emits before invoking update | | unauthorized-error | emits if response status is 401 while refreshing token | | update-error | emits after error while updating profile | | update-success | emits after successful profile update |
<uam-request-password-reset>
Properties
| Property | Description | Type | Default Value |
|:---------|:--------------------------------------------|:---------------|:---------------|
| login | Route to go back to login | Object, String | 'login' |
| redirect | Route to redirect to after requesting reset | Object, String | 'home' |
| title | Title to show as heading | String | translated 'user.requestPasswordReset.title' key |
Events
| Event | Description | |:-------------------------------|:-----------------------------------| | request-password-reset:error | emits after error while requesting password reset | | request-password-reset:start | emits before requesting password reset | | request-password-reset:success | emits after successfully requesting password reset |
<uam-reset-password>
Properties
| Property | Description | Type | Default Value |
|:----------|:-------------------------------|:---------------|:----------------------------------|
| max-password | Maximum password length | Number | 255 |
| min-password | Minimum password length | Number | 6 |
| redirect | Route to redirect to after resetting password | Object, String | 'login' |
| reset-url | API url to reset password | String | |
| title | Title to show as heading | String | translated 'user.resetPassword.title' key |
Events
| Event | Description | |:-----------------------|:-----------------------------------| | reset-password:error | emits after error while resetting password | | reset-password:start | emits before invoking password reset | | reset-password:success | emits after successful password reset |
<uam-user-enable>
Properties
| Property | Description | Type | Default Value |
|:-----------|:-----------------------------------------|:--------|:-----------------|
| enable-url | API url to enable user | String | |
| redirect | Route to redirect to after enabling user | Object, String | 'home' |
Events
| Event | Description | |:--------------------|:---------------------------------------| | user-enable:error | emits after error while enabling user | | user-enable:start | emits before starting to enable user | | user-enable:success | emits after successfully enabling user |
<uam-user-menu>
Properties
| Property | Description | Type | Default Value |
|:---------|:-------------------------------|:---------------|:-----------------------------------|
| divider | Show dropdown divider | Boolean | true |
| login | Login route | Object, String | 'login' |
| profile | Profile route | Object, String | |
| right | Right align dowpdown menu | Boolean | false |
| signup | Signup route | Object, String | 'signup' |
| welcome | Content to show on menu button | String | translated user.menu.welcome key |
<uam-signup>
Properties
| Property | Description | Type | Default Value |
|:------------|:--------------------------------------|:--------|:-----------------------------------|
| max-password | Maximum password length | Number | 255 |
| min-password | Minimum password length | Number | 6 |
| redirect | Route to redirect to after signup. | String, Object | 'home' |
| title | Title to show as heading | String | translated user.signup.title key |
Events
| Event | Description | |:--------------|:------------------------------------| | signup:error | emits after error while signing up | | signup:start | emits before invoking signup | | signup:success | emits after successful signup |