Vue Adal
Vue Adal is a plugin for Vue.js to help with using Azure Active Directory.
Check the sample folder for a usage example.
Installation
yarn add vue-adal
OR
npm install vue-adal
Basic Usage
Vue
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:
...Vue...
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:
... AuthenticationContext...
Route Hooks
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: MySecretComponent meta: requireAuth: true ...
To make a route that requires role(s), add a :
// Other routes... path: '/secretRoles' name: 'secretRoles' component: MySecretRolesComponent meta: requireAuth: true // Much match at least one of these roles requireRoles: '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!