Vue Auth / Intro / Intro
The vue-auth package is a simple light weight front end plugin for Vue.js. It's purpose is to simplify common authentication tasks using shorthand methods such as $auth.login() and $auth.register() with the rest happening under the hood.
It's important to note that this is a front end plugin that for the most part only facilitates authentication token transfer between the client and API. The actual authentication mechanisms will therefore be determined by the API with it's associated security concerns.
#Getting Started
If you are new to the dev world then there are some basic concepts you will need to be familiar with for authentication such as CORS. It's best to start with the Primer Guide which highlights some of the prerequisite knowledge.
If you are new to the plugin itself then check out the Startup Guide and Demos Guide which contains a fully working vue-cli project example with vue-auth.
#Features
The vue-auth plugin comes with a bunch of standard features out of the box some of which are highlighted below.
#Login / Register
Commonly used authentication methods available via shorthand calls such as $auth.login(), $auth.register() and $auth.logout(). These also support a variety of special options such as redirect and autoLogin to help process some more common actions after a successful login or register request.
#Remember Me / Stay Signed In
Allow users to stay signed in after a browser session is terminated. This means when a user completely closes their browser they will still be logged in when returning on the same device.
The remember option allows saving some data for when a user returns to the app. For instance on a login page we may want to show a "Welcome back Rob" message.
#OAuth2 Social Login
Support for OAuth third party login with drivers for Facebook and Google out of the box. This facilitates making the initial request for a "code" token response which is then used to make a request to the applications API for further processing.
#Route Auth Meta
The plugin also works with vue-router of the box which taps into the router meta for a special auth object. This allows us to set various access controls on what routes require an authenticated user or specific user roles with automatic redirects if one of these checks fails.
#Redirect Detection
Should one of the route auth meta checks fail an automatic redirect may occur. For instance, a user tries to access a page requiring authentication but gets redirected to the login page. This will track the initially requested page to allow redirection back after a successful login.
#User Data
When a successful login request is made the plugin will automatically store the response data and make subsequent user data fetches on refresh. That data will then be available via a handy $auth.user() method which can be used throughout the application.
#Privilege / Access Checks
The $auth.check() method will be commonly used to display certain parts of the application based on a users role or privilege. Because the check is generic and can tap into any part of the user object it can essentially check anything from a user role to a specific privilege.
#Token Refresh
For most authentication schemes the token will at some point need to refresh as it will expire. The plugin comes with support to check for this and to attempt an auto refresh if possible.
#User Impersonation
Most applications will also need to support some kind of an "admin" back end for administrators or managers of the application. The plugin comes with support for user "impersonation" allowing temporary login as any user in the system.
Note that this will depend on support from the application API or back-end support with appropriate access to such a feature defined there. The vue-auth plugin simply facilitates the process not the token generation.
#Support
The plugin is designed as a driver model which allows it to work with a lot of other popular plugins and authentication schemes.
#Axios / Vue Resource
One main part of the plugin is to make HTTP requests to the API for various method calls and checks. For this the plugin piggy backs off existing HTTP plugins such as Axios and Vue Resource. These are two widely popular plugins used with Vue.js. The vue-auth plugin ships with drivers for both of these out of the box.
#JSON Web Tokens
The plugin was originally designed for use with JSON web tokens. However, there is nothing special about these tokens as they are simply a base64 encoded string that gets sent back and forth using either the "Basic" or "Bearer" auth drivers via an Authentication header.
#Multiple Drivers
The vue-auth plugin ships with multiple drivers out of the box for support with "http requests", "token parsing", "routing" and "OAuth2 social logins". For more details it's best to check the Drivers Guide and OAuth2 Guide.
