myHotTake

Authentication vs Authorization in Route Guards

Written by

Tyler

in

,
Tweet
Share
Pin
Share

If this story helps you, feel free to like or share it! Let’s dive into it.

I like to think of route guards like bouncers at an exclusive club. I’m running this high-end club. At the entrance, I have a burly bouncer named Auth. His job? To check if people have an invitation—think of this as authentication. If they don’t, they’re politely turned away and told to come back when they’ve got one.

But it doesn’t stop there. Inside the club, there’s a VIP lounge. Only certain guests with special wristbands can enter—that’s where my second bouncer, Role, comes in. Role doesn’t care about just invitations; he checks if people have the right wristband for the lounge. This is authorization. If someone has the wrong wristband, they get redirected back to the dance floor, no hard feelings.

In my code, Auth and Role are just functions that run before anyone enters a “room” (or route). If Auth says, “No invitation? Bye,” or Role says, “Wrong wristband? Not this time,” the journey stops or redirects.

This way, my club (app) stays secure and exclusive, while the guests (users) have clear guidelines on what they need to enjoy the experience.

In JavaScript, route guards are like those bouncers we talked about. Let’s say I’m using a library like Vue Router, Angular Router, or React Router. Here’s how I’d write the guards for Auth (authentication) and Role (authorization).

Authentication Guard (Auth)

Auth checks if the user has an invitation (is logged in).

const isAuthenticated = () => {
  // Check if the user is logged in
  return !!localStorage.getItem('userToken');
};

// Example of an auth guard
const authGuard = (to, from, next) => {
  if (isAuthenticated()) {
    next(); // Allow access
  } else {
    next('/login'); // Redirect to login page
  }
};

Authorization Guard (Role)

Role checks if the user has the right wristband (permissions).

const hasPermission = (requiredRole) => {
  const userRole = JSON.parse(localStorage.getItem('userRole'));
  return userRole === requiredRole;
};

// Example of a role guard
const roleGuard = (requiredRole) => (to, from, next) => {
  if (isAuthenticated() && hasPermission(requiredRole)) {
    next(); // Allow access
  } else {
    next('/not-authorized'); // Redirect to an error page
  }
};

Integrating Guards with Routes

Here’s how I’d tie these guards into routes using Vue Router as an example:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: authGuard, // Only authenticated users can enter
  },
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: roleGuard('admin'), // Only admins can access
  },
];

The guards run before users enter the route. If they pass the checks, they’re let in. If not, they’re redirected.

Key Takeaways

  1. Authentication ensures users are who they claim to be. Think of it as checking for invitations.
  2. Authorization determines what users are allowed to do. Think of it as checking their wristband.
  3. Route guards are middleware functions that check these conditions before letting users access specific routes.

By using guards like this, I keep my app secure and ensure users only see what they’re supposed to see.

Post Views: 2

More posts