Hej,
Mam taką strukturę komponentów w mojej apce:

Kluczowe są tutaj te zaznaczone na żółto, w TasksPage pobieram sobie z mojego api użytkownika i wrzucam go do localStorage w taki sposób:
created() {
this.axios.defaults.headers.common[
"Authorization"
] = `Bearer ${userService.getToken()}`;
this.axios.get('/api/user')
.then(res => {
if(res.status === 200)
userService.setUser(res.data.data);
})
.catch(e => {
console.log(e.response);
})
}
Tutaj kod UserService:
export default class UserService {
getUserObject() {
return JSON.parse(localStorage.getItem('currentUser'));
}
getToken() {
return localStorage.getItem('token');
}
setUser(user) {
localStorage.setItem('currentUser', JSON.stringify(user));
}
setToken(token) {
localStorage.setItem('token', token);
}
clearData() {
const keysToRemove = ['token', 'currentUser'];
keysToRemove.forEach(key => localStorage.removeItem(key));
}
}
Natomiast w komponencie LoggedUserDropdown wrzucam do właściwości użytkownika z localStorage w ten sposób (próbowałem też przypisywać te dane w różnych Hookach, ale nadal nic):
data() {
return {
isActive: false,
user: userService.getUserObject(),
};
},
I tutaj zaczynają się schody bo dostaje taki błąd:

Co śmieszniejsze: Wszystko działa jak należy po wciśnięciu F5.
Wcześniej wszystko działało bezproblemowo na tym kodzie, ale nagle dostaje takie coś :/