Vue Adal is a plugin for Vue.js to help with using Azure Active Directory.
Check the sample folder for a usage example.
yarn add vue-adal
npm install vue-adal
important: make sure to set the mode on your router to 'history' so that it doesn't use hashes! This will have implications on the serverside.
mode: 'history' // Required for Adal library... // Rest of router init
Getting user Information
After signing in, get access to the user as follows:
...const profile = AuthenticationContextuserprofile...
Getting Access to a Resource
After configuring Vue Adal, you'll still need to get a token to a resource.
Important: your Azure application must be configured to allow the oauth2ImplicitFlow in the manifest, like so:
Axios HTTP Client / Interceptor
Vue Adal provides a convenient and automated way to do that with an axios http client, called AxiosAuthHttp. It configures an interceptor the auto-acquires tokens and will retry requests after a 401 and another attempt to get a token.
Here is an example:
Take a look at the sample for more details.
Manually getting a token
If you'd like to get a token yourself, use the acquireToken command on the Authentication context:
If you pass in a router object as an option in Vue Adal, it will configure a global hook before each route allowing for route meta tags around authentication and roles.
To make a route that requires auth, add a meta object to the route with requireAuth set to true:
// Other routes...path: '/secret'name: 'secret'component: MySecretComponentmeta:requireAuth: true...
To make a route that requires role(s), add a :
// Other routes...path: '/secretRoles'name: 'secretRoles'component: MySecretRolesComponentmeta:requireAuth: true// Much match at least one of these rolesrequireRoles:'TheMan''Admin'...
Conditionally Show Content Based on Auth Status
Conditionally show content when authenticated:
You are signed in!
Conditionally show content only when at least one role exists on user:
You are an admin!