CODEWITHSUNDEEP
javascriptexpressvue.jsserver-side-rendering
Mithun Shreevatsa
Mithun Shreevatsa

Reputation: 3609

How not to serve admin page contents in Vue application without authentication?

With a role-based authentication setup, we can control routes and components to hide between a normal user and an administrator in Vue app.

When roles are large, the application becomes huge, and logic to control crud operation becomes a tedious task.

So, I am looking for a secured model setup where we should not serve user/admin/contents to the browser unless he is authenticated. Browser meaning the javascript scripts shouldn't be loading.

So, I have an idea we can do with this with a simple HTML page and redirection to a separate application with jwt token which consists of user details.

Is it a good approach? or is there a better way to handle this with Vue? Do we need to get Express in between to load the server contents after logging in?

Looking for an example or reference document on this secure application.

Also looking for clearing browser the cache after logout or if token expired

Upvotes: 1

Views: 1378

Answers (2)

prisar
prisar

Reputation: 3195

Create two functions for checking authentication.

import Login from '@/components/Auth/Login';
import AdminContents from '@/views/user/admin/contents';
import Home from '@/components/Home/Home';
import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';

Vue.use(Router);

const ifAuthenticated = (to, from, next) => {
  if (store.getters['auth/isAuthenticated']) {
    return next();
  }
  return next('/login');
};

const ifNotAuthenticated = (to, from, next) => {
  if (!store.getters['auth/isAuthenticated']) {
    return next();
  }
  return next('/');
};

const router = new Router({
mode: 'history',
routes: [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    beforeEnter: ifNotAuthenticated,
  },
  {
    path: '/',
    component: Home,
    children: [
     {
      path: '/admin-contents',
      name: 'admincontents',
      component: AdminContents,
      beforeEnter: ifAuthenticated,
     },
    ],
  },
 ],
});

Upvotes: 1

generic3892372
generic3892372

Reputation: 206

Creating a new or separate Vue instance or application is one way to simplify the code base if you see it becoming un-maintainable; however, vue.js has tools for keeping code tidy, even with various roles and routes.

In the router file (index.js for me in the src/ router directory), you can add what are called router guards. They look somewhat like this: 

path: "/uploadavatar",
    name: "UploadAvatar",
    component: () =>
      import(
        /* webpackChunkName: "uploadavatar" */ "../views/UploadAvatar.vue"
      ),
    beforeEnter(routeTo, routeFrom, next) { 
    // do something here like check the current user role(s)
    }

Generally, I'd recommend investigating whether router guards can fulfill your need.

In addition, maintaining state of various application objects can get tricky with different roles unless you are using Vuex.

Vuex is package for Vue.js that creates a central repository of state for your application so that if one component changes an object from one location, tab, or function, the state is then shared - and updated - to other dependent components and views. Vuex basically manages a 'single source of truth' for data in the application.

Why is this important for role-based security? Because if a route should only be available to a user with a specific role, and (if) somewhere along the way your application loses track of the login, or (if) it's been altered in a different component, it could present a security gap that may result in a route unintentionally being available to the wrong user.

So using one 'source of truth' like Vuex for application state makes addressing this risk more straightforward. If all components are always using the Vuex store to get the current user, for example, then you've simplified your application substantially.

Those two peices of advice: using router guards and Vuex, should provide you with some flexibility:

Vuex: https://vuex.vuejs.org/guide/ Vue.js Router guards: https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

With other types of role-based functions, like granular component behavior that is dependent on role, I'm not certain what the best approach is for organizing the code.

My own approach within vue.js is to try and organize the code logically within each component for clarity and maintainability.

Upvotes: 1

Related Questions