[Vuejs]-Localstorage returning object on reload

The problem is on this line:

const userRole = userInfoLocalStorage ? JSON.parse(userInfoLocalStorage).role : 'student'

You’re calling JSON.parse on an object (userInfoLocalStorage) that has already been deserialized with JSON.parse on the line above:

const userInfoLocalStorage = JSON.parse(localStorage.getItem("userInfo"))

Instead, just do const userRole = userInfoLocalStorage ? userInfoLocalStorage.role : 'student'