Skip to content

Commit

Permalink
refactor(projects): ♻️ sync refactor router guard. (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@skyfeiz
skyfeiz authored Dec 9, 2024
1 parent cffb5c1 commit 840e5f0
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 96 deletions.
2 changes: 2 additions & 0 deletions .env
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
# the base url of the application, the default is "/"
# if use a sub directory, it must be end with "/", like "/admin/" but not "/admin"
VITE_BASE_URL=/

VITE_APP_TITLE=SoybeanAdmin
Expand Down
169 changes: 73 additions & 96 deletions src/router/guard/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,54 +36,34 @@ export function createRouteGuard(router: Router) {
const routeRoles = to.meta.roles || [];

const hasRole = authStore.userInfo.roles.some(role => routeRoles.includes(role));

const hasAuth = authStore.isStaticSuper || !routeRoles.length || hasRole;

const routeSwitches: CommonType.StrategicPattern[] = [
// if it is login route when logged in, then switch to the root page
{
condition: isLogin && to.name === loginRoute,
callback: () => {
next({ name: rootRoute });
}
},
// if it is constant route, then it is allowed to access directly
{
condition: !needLogin,
callback: () => {
handleRouteSwitch(to, from, next);
}
},
// if the route need login but the user is not logged in, then switch to the login page
{
condition: !isLogin && needLogin,
callback: () => {
next({ name: loginRoute, query: { redirect: to.fullPath } });
}
},
// if the user is logged in and has authorization, then it is allowed to access
{
condition: isLogin && needLogin && hasAuth,
callback: () => {
handleRouteSwitch(to, from, next);
}
},
// if the user is logged in but does not have authorization, then switch to the 403 page
{
condition: isLogin && needLogin && !hasAuth,
callback: () => {
next({ name: noAuthorizationRoute });
}
}
];

routeSwitches.some(({ condition, callback }) => {
if (condition) {
callback();
}

return condition;
});
// if it is login route when logged in, then switch to the root page
if (to.name === loginRoute && isLogin) {
next({ name: rootRoute });
return;
}

// if the route does not need login, then it is allowed to access directly
if (!needLogin) {
handleRouteSwitch(to, from, next);
return;
}

// the route need login but the user is not logged in, then switch to the login page
if (!isLogin) {
next({ name: loginRoute, query: { redirect: to.fullPath } });
return;
}

// if the user is logged in but does not have authorization, then switch to the 403 page
if (!hasAuth) {
next({ name: noAuthorizationRoute });
return;
}

// switch route normally
handleRouteSwitch(to, from, next);
});
}

Expand All @@ -93,7 +73,6 @@ export function createRouteGuard(router: Router) {
* @param to to route
*/
async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw | null> {
const authStore = useAuthStore();
const routeStore = useRouteStore();

const notFoundRoute: RouteKey = 'not-found';
Expand All @@ -105,50 +84,28 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw

// the route is captured by the "not-found" route because the constant route is not initialized
// after the constant route is initialized, redirect to the original route
if (isNotFoundRoute) {
const path = to.fullPath;

const location: RouteLocationRaw = {
path,
replace: true,
query: to.query,
hash: to.hash
};

return location;
}
}
const path = to.fullPath;
const location: RouteLocationRaw = {
path,
replace: true,
query: to.query,
hash: to.hash
};

// if the route is the constant route but is not the "not-found" route, then it is allowed to access.
if (to.meta.constant && !isNotFoundRoute) {
return null;
return location;
}

// the auth route is initialized
// it is not the "not-found" route, then it is allowed to access
if (routeStore.isInitAuthRoute && !isNotFoundRoute) {
return null;
}
// it is captured by the "not-found" route, then check whether the route exists
if (routeStore.isInitAuthRoute && isNotFoundRoute) {
const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
const noPermissionRoute: RouteKey = '403';
const isLogin = Boolean(localStg.get('token'));

if (exist) {
const location: RouteLocationRaw = {
name: noPermissionRoute
};
if (!isLogin) {
// if the user is not logged in and the route is a constant route but not the "not-found" route, then it is allowed to access.
if (to.meta.constant && !isNotFoundRoute) {
routeStore.onRouteSwitchWhenNotLoggedIn();

return location;
return null;
}

return null;
}

// if the auth route is not initialized, then initialize the auth route
const isLogin = Boolean(localStg.get('token'));
// initialize the auth route requires the user to be logged in, if not, redirect to the login page
if (!isLogin) {
// if the user is not logged in, then switch to the login page
const loginRoute: RouteKey = 'login';
const query = getRouteQueryOfLoginRoute(to, routeStore.routeHome);

Expand All @@ -160,22 +117,42 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
return location;
}

await authStore.initUserInfo();
if (!routeStore.isInitAuthRoute) {
// initialize the auth route
await routeStore.initAuthRoute();

// initialize the auth route
await routeStore.initAuthRoute();
// the route is captured by the "not-found" route because the auth route is not initialized
// after the auth route is initialized, redirect to the original route
if (isNotFoundRoute) {
const rootRoute: RouteKey = 'root';
const path = to.redirectedFrom?.name === rootRoute ? '/' : to.fullPath;

// the route is captured by the "not-found" route because the auth route is not initialized
// after the auth route is initialized, redirect to the original route
if (isNotFoundRoute) {
const rootRoute: RouteKey = 'root';
const path = to.redirectedFrom?.name === rootRoute ? '/' : to.fullPath;
const location: RouteLocationRaw = {
path,
replace: true,
query: to.query,
hash: to.hash
};

return location;
}
}

// the auth route is initialized
// it is not the "not-found" route, then it is allowed to access
if (!isNotFoundRoute) {
routeStore.onRouteSwitchWhenLoggedIn();

return null;
}

// it is captured by the "not-found" route, then check whether the route exists
const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
const noPermissionRoute: RouteKey = '403';

if (exist) {
const location: RouteLocationRaw = {
path,
replace: true,
query: to.query,
hash: to.hash
name: noPermissionRoute
};

return location;
Expand Down

0 comments on commit 840e5f0

Please sign in to comment.