First make a change in signin
and signup
pages to redirect user to dashboard (if user role is admin).
Redirect to '/admin' page if user is admin.
// router.push("/");
if (data?.user?.role === "Admin") {
router.push("/admin");
} else {
router.push("/");
}
Show the Dashboard link in the Menu only if user has role of Admin
.
{auth?.user?.role === "Admin" && (
<Menu.ItemGroup title="Management">
<Menu.Item key="setting:1">
<Link href="/admin">
<a>Dashboard</a>
</Link>
</Menu.Item>
</Menu.ItemGroup>
)}
Other users who will signup to our app will be able to do things like leave a comment etc.
If someone manually tried to visit admin pages, redirect away.
// components/nav/AdminNav.js
import { AuthContext } from "../../context/auth";
import { useRouter } from "next/router";
const { Sider } = Layout;
const { SubMenu } = Menu;
const AdminNav = () => {
// context
const [auth, setAuth] = useContext(AuthContext);
// hooks
const router = useRouter();
// state
const [collapsed, setCollapsed] = useState(false);
useEffect(() => {
if (auth?.user?.role !== "Admin") {
router.push("/");
}
}, [auth]);
// rest of code
}