Authentication

To facilitate the authentication process, Pinx is equipped with a set APIs. These APIs are purpose-built for handling user login and logout functionalities. By leveraging these APIs, user data and relevant authentication tokens can be efficiently stored and managed in the localstorage of the user's device or browser to persisting your session during reloads.

// Login
// inside "setLogged" function you can write your logic and save user data
useAuthStore().setLogged(<USER_INFO>)
// Logout
// this function cleans user data
useAuthStore().setLogout()

Beyond the basic login and logout functionalities, the Pinx extends its capabilities to offer granular control over user roles. Each route or endpoint within the Pinx is endowed with the capability of enforcing authentication measures. In practice, this means that certain routes can be accessible only to authenticated users while others may require specific user roles to be accessed.

const routes = [
    {
        path: "/profile",
        name: "profile",
        component: () => import("@/views/Profile.vue"),
        meta: { title: "Profile", auth: true, roles: "all" } // all roles can access
    },
    {
        path: "/protected-data",
        name: "protected-data",
        component: () => import("@/views/ProtectedData.vue"),
        meta: { title: "Protected Data", auth: true, roles: ["admin", "manager"] } // only admin and manager can access
    },
    {
        path: "/guest-page",
        name: "guest-page",
        component: () => import("@/views/GuestPage.vue"),
        meta: { title: "Guest Page", checkAuth: true, authRedirect: "/profile" }
        // By setting the "checkAuth" parameter to "true", you can verify whether the user is logged in, and if that is the case, perform a redirect to the "authRedirect" URL.
        // By default, "authRedirect" is set to "/"
    }
]

Furthermore, the platform includes a dedicated and distinct /logout route. The primary purpose of this route is to facilitate the smooth termination of user sessions. When a user accesses this route, it initiates a logout procedure that effectively clears the user's authentication status and associated session data. Following the successful logout, the platform redirects the user back to the login route.

If you are using Nuxt and its auto-generated page routing mechanism, you can insert the metadata inside the page files in this manner:

<!-- 
    src/pages/NewPage.vue 
-->
<template>
    <div class="page">
        <h1>New page</h1>
    </div>
</template>
<script lang="ts" setup>
    definePageMeta({
        title: "New page",
        auth: true,
        roles: "all"
    })
</script>