Portfolio page logout issue

})
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
NProgress.start();
if (to.meta.requiresAuth && !authStore.token) {
next('/login'); // Redirect if not logged in
} else {
next();
}
});
router.afterEach(() => {
NProgress.done();
});
export default router
we have route and after login if we go to /portfolio page then why we loggd out

Here are a few things to check:

—

### ✅ 1. **Check if Token Is Persisted After Login**
Your `authStore.token` might not be persisted on page reload or route changes.

– In your `auth` store (likely using Pinia), make sure you're **persisting** the token using `pinia-plugin-persistedstate`, or similar.

Example:

// stores/auth.js
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: null,
  }),
  persist: true, // <--- this line ensures persistence across refreshes/routes
});

—

### ✅ 2. **Check Portfolio Page for Auth Logic**
Since `/portfolio` is **not protected** with `meta: { requiresAuth: true }`, maybe something in the `PortfolioPage.vue` component is trying to make an **API call** that requires authentication—and if the token is missing or invalid, the API could respond with 401 and log the user out.

Check this in `PortfolioPage.vue`:

onMounted(() => {
  axios.get('/api/protected-data') // make sure token is included
    .catch(error => {
      if (error.response?.status === 401) {
        const authStore = useAuthStore();
        authStore.logout(); // maybe you're logging out here?
      }
    });
});

—

### ✅ 3. **Check Your API Interceptor**
Do you have an Axios interceptor that logs the user out if a request fails?

Example:

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      const authStore = useAuthStore();
      authStore.logout();
    }
    return Promise.reject(error);
  }
);

If `/portfolio` makes any API request that fails with a 401, this interceptor could be logging the user out.

—

### ✅ 4. **Are You Using `localStorage`, `sessionStorage`, or Cookies?**
– If you store the token in `sessionStorage`, it'll be gone on tab close or reload.
– `localStorage` persists better.
– If you're using cookies, make sure the cookie isn't being cleared or not sent to your API due to path/domain mismatch.

—

### ✅ 5. **Double-Check Logout Logic**
Make sure `authStore.logout()` isn't being triggered somewhere unexpectedly, like inside `PortfolioPage.vue`.

—

### ✅ How to Fix
If `/portfolio` is meant to be accessed **only by logged-in users**, just protect it:

{
  name: 'portfolio',
  path: '/portfolio',
  component: PortfolioPage,
  meta: { requiresAuth: true }
}

—

Want to share the `authStore` and `PortfolioPage.vue` code? I can pinpoint it further.

export const useAuthStore = defineStore('auth', {
state: () => ({
user: localStorage.getItem('user') ? (JSON.parse(localStorage.getItem('user')!) as User) : null,
token: localStorage.getItem('token') || null,
}),
getters: {
isAuthenticated: (state) => !!state.token, // Returns true if token exists
},
actions: {
setUser(user: User, token: string) {
this.user = user;
this.token = token;
localStorage.setItem('user', JSON.stringify(user));
localStorage.setItem('token', token);
},

logout() {
this.user = null;
this.token = null;
localStorage.removeItem('user');
localStorage.removeItem('token');
}
}
});

Since your `/portfolio` route is **public**, and you're experiencing logout when navigating there after login, here's a checklist tailored to your setup:

—

## ✅ What to Double-Check

### 1. **Portfolio Page: API Call Might Be Triggering Logout**

Check inside `PortfolioPage.vue`—do you have any API call on `mounted` or `created` like this?

onMounted(() => {
  axios.get('/api/portfolio')
    .catch(error => {
      if (error.response?.status === 401) {
        const authStore = useAuthStore();
        authStore.logout(); // this could be firing!
      }
    });
});

💡 If the `token` is not sent in headers, or if it's invalid/expired, your API will return `401`, and your global interceptor or manual error handler might be logging the user out.

—

### 2. **Check Axios Setup: Is the Token Being Attached?**

Ensure your token is set in Axios headers **after login**, like:

import axios from 'axios';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();
if (authStore.token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${authStore.token}`;
}

✅ Do this **right after login** or inside a plugin/composable file that's executed globally.

Otherwise, API requests won’t be authenticated → you get 401 → `logout()` triggers.

—

### 3. **Interceptor Catching 401**

If you’ve set up a global Axios response interceptor, it might log out on any 401:

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      const authStore = useAuthStore();
      authStore.logout();
    }
    return Promise.reject(error);
  }
);

✅ Add a check before logging out—maybe don't log out if it's a public endpoint like `/api/portfolio`.

—

### 4. **Token Expiry**

If the backend sends an expired token and doesn't refresh it, and your app has no refresh token logic, you’ll be logged out when the first protected call is made (often on route navigation).

—

### 🔒 Suggested Fix: Protect the Route

If `/portfolio` is **meant to be protected**, just mark it like this:

{
  name: 'portfolio',
  path: '/portfolio',
  component: PortfolioPage,
  meta: { requiresAuth: true }
}

Your route guard will handle redirection properly without unnecessary 401s:

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  NProgress.start();
  if (to.meta.requiresAuth && !authStore.token) {
    next('/login');
  } else {
    next();
  }
});

—

## ✅ TL;DR

If you're getting logged out when visiting `/portfolio`:

– It's most likely due to a 401 response from an API call inside `PortfolioPage.vue`.
– Make sure you're attaching the token to requests.
– Review if Axios interceptor is logging out users on all 401s.
– If it's a protected page, mark it with `meta: { requiresAuth: true }`.

Want to paste your `PortfolioPage.vue` code too? I’ll help debug it line by line.

Here’s a breakdown of likely causes and how to fix it:

—

## 🔍 The Core Problem

You're using this in your Pinia store:

user: localStorage.getItem('user') ? (JSON.parse(localStorage.getItem('user')!) as User) : null,
token: localStorage.getItem('token') || null,

This **loads data from localStorage at store creation time**.

BUT! 👇

### 🧨 If your store is created **before** `localStorage` is set (e.g., on page reload), then:
– `token` becomes `null`
– Your route guard thinks you're not logged in:

if (to.meta.requiresAuth && !authStore.token) {

– And if **you have an Axios interceptor**, it likely logs out on 401

—

## ✅ Recommended Fixes

### ✅ 1. Add Pinia Persistence

Instead of manually syncing state with `localStorage`, use the [Pinia Persist plugin](https://prazdevs.github.io/pinia-plugin-persistedstate/):

#### Step 1: Install the plugin

yarn add pinia-plugin-persistedstate

#### Step 2: Add it in your `main.ts`

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)

#### Step 3: Update your store

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null as User | null,
    token: null as string | null,
  }),
  persist: true, // 🎯 this line persists the entire store
  ...
});

This ensures your `user` and `token` persist across reloads and re-entries, even on public routes.

—

### ✅ 2. Attach Token to Axios (After Login or App Start)

const authStore = useAuthStore();
if (authStore.token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${authStore.token}`;
}

Put this inside a layout component (`App.vue` or `DefaultVuetify.vue`) or inside a `useAuthInit()` composable that's called when your app starts.

—

### ✅ 3. Double-Check Interceptors

If you use something like:

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response.status === 401) {
      useAuthStore().logout(); // 🚨 avoid logging out on public route failure
    }
    return Promise.reject(err);
  }
);

👉 Only log out if the failed request was to a **protected API endpoint**.

—

## ✅ Summary

| Problem | Fix |
|——–|——|
| Store resets after refresh | Use `pinia-plugin-persistedstate` |
| Axios missing token | Set `axios.defaults.headers.common` on app start |
| 401 errors on public pages causing logout | Add logic to avoid logging out on public API calls |
| Route guard thinks you're unauthenticated | Ensure `authStore.token` is properly persisted |

—

If you want, share:
– Your Axios setup
– Where you initialize the store/app
– Whether you're calling any API from layout or app level

I’ll walk you through the fix step-by-step.