Managing User Access with Roles and Profiles

Controlling who can access what in your application is very important. That’s where roles and profiles help.

---

✅ What Are Roles?

Roles define what a user can do in the system.

🎯 Common Roles:

• Admin – full control

• Editor – can change content

• Viewer – read-only access

• User – regular access

💡 Example:

{
  "name": "Rasagna",
  "email": "rasagna@example.com",
  "role": "admin"
}

---

✅ What Are Profiles?

Profiles store user-related information, like:

• Name

• Email

• Preferences

• Photo

• Language

• Theme

Profiles help personalize the experience but do not control permissions.

---

🧠 Difference Between Roles and Profiles:

Feature	Role	Profile
Purpose	Access control	User info & preferences
Editable by	Admin	User (mostly)
Affects	What user can do	How user sees the system

---

🔗 Why Manage Roles?

• Prevent unauthorized access

• Give the right access to the right person

• Improve security

• Separate concerns (Admin vs. User)

---

🛠️ Implementing Role-Based Access in a Web App

Let’s use Node.js + Express + MongoDB + React for the example.

---

📁 MongoDB User Schema Example

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String,
  role: { type: String, enum: ['admin', 'editor', 'viewer'], default: 'viewer' },
  profile: {
    photo: String,
    language: String,
    theme: String,
  }
});

module.exports = mongoose.model('User', userSchema);

---

🧪 Middleware to Check Role in Express.js

// middleware/checkRole.js
function checkRole(role) {
  return (req, res, next) => {
    if (req.user && req.user.role === role) {
      next();
    } else {
      return res.status(403).json({ message: "Access Denied" });
    }
  };
}

module.exports = checkRole;

---

🔐 Example Routes with Role Protection

const express = require('express');
const router = express.Router();
const checkRole = require('./middleware/checkRole');

// Only admin can access this route
router.get('/admin/data', checkRole('admin'), (req, res) => {
  res.json({ secret: "Admin only content" });
});

---

🧑‍💻 React: Conditional Rendering Based on Role

function Dashboard({ user }) {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>

      {user.role === 'admin' && (
        <button onClick={handleAdminTask}>Admin Task</button>
      )}

      {user.role === 'editor' && (
        <button onClick={handleEditContent}>Edit Content</button>
      )}
    </div>
  );
}

---

🔐 Frontend Route Guard (React + React Router)

import { Navigate } from "react-router-dom";

function PrivateRoute({ user, children, allowedRoles }) {
  return allowedRoles.includes(user.role)
    ? children
    : <Navigate to="/unauthorized" />;
}

---

📝 Profile Management in React

function UserProfile({ user }) {
  return (
    <div>
      <img src={user.profile.photo} alt="User" />
      <p>Name: {user.name}</p>
      <p>Language: {user.profile.language}</p>
      <p>Theme: {user.profile.theme}</p>
    </div>
  );
}

---

🔄 Updating Role in Admin Panel

// PUT /api/users/:id/role
router.put('/users/:id/role', checkRole('admin'), async (req, res) => {
  const { role } = req.body;
  const updatedUser = await User.findByIdAndUpdate(req.params.id, { role }, { new: true });
  res.json(updatedUser);
});

---

🔒 Secure Practices

• Always validate role on server-side

• Do not trust frontend-only checks

• Store role info securely (e.g., JWT or sessions)

• Use HTTPS

• Keep roles simple and easy to understand

---

🧠 Bonus: Role Hierarchy (Optional)

You can define role levels:

const roleLevels = {
  admin: 3,
  editor: 2,
  viewer: 1
};

function hasAccess(userRole, requiredRole) {
  return roleLevels[userRole] >= roleLevels[requiredRole];
}

---

🛡️ JWT Token with Role Example

// JWT payload
{
  id: "user123",
  name: "Rasagna",
  role: "editor"
}

Use this info to authorize routes without querying DB every time.

---

🚦 Summary Table

Feature	Example
Role Field	admin, editor, viewer
Profile Data	Name, Theme, Language
Access Check	Express Middleware
UI Display	React Role-Based Components
Auth Storage	JWT or Session

---

🧩 Real-World Example:

Imagine an online learning platform:

Role	Access Rights
Admin	Add/delete courses, manage users
Teacher	Upload materials, grade students
Student	View lessons, submit assignments

You can create roles and apply access rules as shown above.

Learn Salesforce Development Training Course

Read More

Creating Reports and Dashboards in Salesforce

What Is a Salesforce Workflow?

Understanding Objects and Fields in Salesforce

How to Create a Salesforce Account and Start Learning