Table of Contents
Vue.js is a popular JavaScript framework for building dynamic web applications. Implementing secure authorization is essential for managing user access based on roles. This tutorial guides you through creating role-based access control (RBAC) using Vuex for state management and Vue Router for navigation control.
Prerequisites
- Basic knowledge of Vue.js
- Vue CLI installed
- Familiarity with Vuex and Vue Router
- Understanding of JavaScript ES6+
Setting Up the Project
Create a new Vue project with Vue CLI:
vue create vue-auth-role
Navigate into the project directory:
cd vue-auth-role
Install Vuex and Vue Router:
npm install vuex vue-router
Configuring Vuex for Role Management
Create a store.js file in the src directory:
src/store.js
import Vue from ‘vue’;
import Vuex from ‘vuex’;
Vue.use(Vuex);
export default new Vuex.Store({
state: {
userRole: null,
},
mutations: {
setUserRole(state, role) {
state.userRole = role;
},
},
actions: {
login({ commit }, role) {
commit(‘setUserRole’, role);
},
logout({ commit }) {
commit(‘setUserRole’, null);
},
},
});
Configuring Vue Router with Role Guards
Create a router.js file in the src directory:
src/router.js
import Vue from ‘vue’;
import Router from ‘vue-router’;
import store from ‘./store’;
Vue.use(Router);
const routes = [
{ path: ‘/’, component: () => import(‘./components/Home.vue’) },
{ path: ‘/admin’, component: () => import(‘./components/Admin.vue’), meta: { requiresRole: ‘admin’ } },
{ path: ‘/user’, component: () => import(‘./components/User.vue’), meta: { requiresRole: ‘user’ } },
];
const router = new Router({
mode: ‘history’,
routes,
});
router.beforeEach((to, from, next) => {
const requiredRole = to.meta.requiresRole;
if (requiredRole) {
const userRole = store.state.userRole;
if (userRole === requiredRole) {
next();
} else {
next(‘/’);
}
} else {
next();
}
});
export default router;
Creating Role-Based Components
Create three components: Home.vue, Admin.vue, User.vue in the src/components directory.
Home.vue
<template>
<div>
<h1>Welcome to the Vue.js Authorization Demo</h1>
</div>
</template>
<script>
export default {}
</script>
Admin.vue
<template>
<div>
<h1>Admin Dashboard</h1>
</div>
</template>
<script>
export default {}
User.vue
<template>
<div>
<h1>User Profile</h1>
</div>
</template>
<script>
export default {}
Implementing Login and Role Assignment
In your main App.vue or a dedicated login component, add buttons to simulate login as different roles:
<template>
<div>
<button @click=”loginAsAdmin”>Login as Admin</button>
<button @click=”loginAsUser”>Login as User</button>
<button @click=”logout”>Logout</button>
</div>
</template>
<script>
import { mapActions } from ‘vuex’;
export default {
methods: {
…mapActions([‘login’, ‘logout’]),
loginAsAdmin() {
this.login(‘admin’);
},
loginAsUser() {
this.login(‘user’);
},
logout() {
this.logout();
},
},
}
Testing the Implementation
Run your Vue application:
npm run serve
Use the buttons to log in as different roles and navigate to protected routes. Verify that access is granted or denied based on the role.
This setup provides a basic role-based access control system in Vue.js using Vuex and Vue Router. You can expand it further by integrating real authentication services and more complex permission schemes.