SaasFrontends
Logo
  1. Frontend
  2. Routing

​
Private Routes

There are 2 types of users:

  • ADMIN: You.
  • TENANT: Your SaaS customers.

And each tenant user can be one of the following:

  • OWNER
  • ADMIN
  • MEMBER
  • GUEST

You can protect your ADMIN URLs from TENANTS, and tenants can have their own private routes based on their member roles.

​
Vue2 and Vue3

src/router/coreRoutes.ts
import { TenantUserRole } from "@/application/enums/core/tenants/TenantUserRole";
import Settings from "@/views/core/settings/Index.vue";
import Workspaces from "@/views/core/settings/Workspaces.vue";
...
export const appCoreRoutes = {
  path: "/app",
  ...
  children: [
    {
      path: "settings",
      component: Settings,
      children: [
        ...
        {
          path: "workspaces",
          component: Workspaces,
          meta: {
            requiresAuth: true,
            roles: [TenantUserRole.OWNER, TenantUserRole.ADMIN],
          },
          ...

​
React

src/App.tsx
...
export default function App() {
  ...
  return (
    <Router>
      ...
      <Routes>
        <Route path="/">
          <Route index element={<Landing />} />
          <Route path="/pricing" element={<Pricing />} />
          ...
        </Route>
        ...
        <Route path="/app" element={<Navigate replace to="/app/dashboard" />} />
        <Route
          path="/app"
          element={
            <PrivateRoute requiresAuth={true}>
              <AppIndex />
            </PrivateRoute>
          }
        >
          ...
          <Route path="settings" element={<Settings />}>
            ...
            <Route
              path="workspaces"
              element={
                <PrivateRoute roles={[TenantUserRole.OWNER, TenantUserRole.ADMIN]}>
                  <Workspaces />
                </PrivateRoute>
              }
            >
              <Route path="new" element={<NewWorkspace />} />
              <Route path="edit/:id" element={<EditWorkspace />} />
            </Route>
            ...

​
Svelte

src/App.svelte
...
<main role="main">
  <Router {url}>
    ...
    <Route path="/">
      <Landing />
    </Route>
    <Route path="/pricing" component={Pricing} />
    ...
    <Route path="/admin"><Redirect to="/admin/tenants" /></Route>
    <PrivateRoute path="admin/*" userTypes={[UserType.Admin]}>
      <AdminIndex>
        <Router>
          <Route path="tenants"><TenantsIndex /></Route>
          <Route path="tenant/:tenantId" let:params><Tenant {...params} /></Route>
          ...
        </Router>
      </AdminIndex>
    </PrivateRoute>
    ...
  </Router>
</main>