When a user logs in I'm storing the status in local storage as shown below using and they get redirected to their dashboard. The dashboard is viewable when we have authenticated = 'true' in the local storage. That works well but now anyone who navigates to the local storage and provides that manually then they can be able to view the dashboard. How can I protect the page if one is not authenticated and they try to view it manually? Sidenote: The APIs are protected with sanctum.
authUser.js
import { defineStore } from 'pinia'
import router from '../router'
import { useLocalStorage } from '@vueuse/core'
export const useLoginStore = defineStore('login', {
state: () => {
return {
fields: {},
errors: {},
loading: false,
authenticated: useLocalStorage('authenticated', null)
}
},
actions: {
logout() {
axios.get("/sanctum/csrf-cookie").then(() => {
axios.post("/api/logout").then((response) => {
this.authenticated = null
router.push({ name: "Login" });
});
});
},
login() {
this.loading = true;
axios
.post("/api/login", this.fields)
.then((res) => {
if (res.status == 201) {
this.fields = {}
this.authenticated = true
this.loading = false;
router.push({ name: "Dashboard" });
}
})
.catch((error) => {
if (error.response.status == 422) {
this.errors = error.response.data.errors;
this.loading = false;
}
});
},
},
})
