diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts
index b8d239c7c..a0919fdf4 100644
--- a/src/router/guard/permission.ts
+++ b/src/router/guard/permission.ts
@@ -25,6 +25,10 @@ export function createPermissionGuard(router: Router) {
     const loginRoute: RouteKey = 'login';
     const noPermissionRoute: RouteKey = '403';
 
+    // check whether the user has permission to access the route
+    // 1. if the route's "roles" is empty, then it is allowed to access
+    // 2. if the user is super admin, then it is allowed to access
+    // 3. if the user's role is included in the route's "roles", then it is allowed to access
     const SUPER_ADMIN = 'R_SUPER';
     const hasPermission =
       !routeRoles.length ||
diff --git a/src/store/modules/route/shared.ts b/src/store/modules/route/shared.ts
index f4c6eed87..5cf7ff1ba 100644
--- a/src/store/modules/route/shared.ts
+++ b/src/store/modules/route/shared.ts
@@ -13,6 +13,7 @@ import SvgIcon from '@/components/custom/svg-icon.vue';
 export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: string[]) {
   const SUPER_ROLE = 'R_SUPER';
 
+  // if the user is super admin, then it is allowed to access all routes
   if (roles.includes(SUPER_ROLE)) {
     return routes;
   }
@@ -29,10 +30,12 @@ export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: stri
 function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
   const routeRoles = (route.meta && route.meta.roles) || [];
 
+  // if the route's "roles" is empty, then it is allowed to access
   if (!routeRoles.length) {
     return [route];
   }
 
+  // if the user's role is included in the route's "roles", then it is allowed to access
   const hasPermission = routeRoles.some(role => roles.includes(role));
 
   const filterRoute = { ...route };