Vue.js | vue login tutorial
TutorialbuiltwithVue2.6.8 and Webpack4.29Otherversionsavailable:Inthistutorialwellgothroughanexampleofhowyoucanimplementrolebasedauthorization/accesscontrolinVue.js.TheexamplebuildsonanothertutorialIpostedrecentlywhichfocusesonJWTauthenticationinVue+Vuex[1],inthisversionIveremovedVuextoshowhowyoucanbuildaVue.jsappwithoutVuex,andextendedtheexampletoincluderolebasedauthorization/accesscontrolontopoftheJWTauthentication.Thetutorialexampleisprettyminimalandcontainsjust3pagestodemonstraterolebase...
Tutorial built with Vue 2.6.8 and Webpack 4.29
Other versions available:
In this tutorial well go through an example of how you can implement role based authorization / access control in Vue.js. The example builds on another tutorial I posted recently which focuses on JWT authentication in Vue + Vuex[1], in this version Ive removed Vuex to show how you can build a Vue.js app without Vuex, and extended the example to include role based authorization / access control on top of the JWT authentication.
The tutorial example is pretty minimal and contains just 3 pages to demonstrate role based authorization in Vue - a login page, a home page and an admin page. The example contains two users - a Normal User who has access to the home page, and an Admin User who has access to everything (home page and admin page).
The project is available on GitHub at https://github.com/cornflourblue/vue-role-based-authorization-example[2].
Here it is in action: (See ...