Within a Vue 3 application utilizing Pinia, my objective is to accomplish the following:
- Direct a user to the sign-in page when authentication is not verified.
- Direct a user to a verification page if authenticated but not yet verified.
- Direct a user to the dashboard upon successful authentication and verification.
Currently, I have successfully set up redirects for unauthenticated users to the sign-in page and verified users to the dashboard by configuring my router index.js file as follows:
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/signin",
name: "signin",
component: () => import("../views/SignIn.vue"),
},
{
path: "/verify",
name: "verify",
component: () => import("../views/Verification.vue"),
meta: { needsAuth: true }
},
{
path: "/dashboard",
name: "dashboard",
component: () => import("../views/UserDashboard.vue"),
meta: { needsAuth: true }
}
]
})
router.beforeEach(async (to, from, next) => {
if (to.meta.needsAuth && localStorage.getItem('accessToken') == null) next('signin')
else next()
})
export default router
Additionally, here is the method responsible for handling sign-ins:
const loginUser = async () => {
try {
const res = await axios.post(
"https://some-api-url/login",
signin.value,
{
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
}
);
localStorage.setItem("accessToken", res.data.data.accessToken);
// Redirect to the dashboard
router.push("/dashboard");
} catch (error) {
error = error.response.data.message;
alert(error);
}
};
Now, the challenge I am facing is that the sign-in endpoint only returns an access token, while the dashboard endpoint returns the verification status. How can I implement redirects for unverified users to the verification page?