Ben Laravel+Vue öğretilen bir yabancı eğitim tamamladım. Orada tabii token değilde klasik session cookie bazlı bir login yapıldı, bunun için Laravel Sanctum kullandı eğitmen.
Vuex kullanarak state içerisinde 2 tane bilgi sakladı;
state: {
isLoggedIn: false,
user: {},
},
isLoggedIn'i harici js dosyasında tanımladı, fonksiyonun yaptığı şu;
export function isLoggedIn() {
return localStorage.getItem("isLoggedIn") == 'true';
}
export function logIn() {
localStorage.setItem("isLoggedIn", true);
}
export function logOut() {
localStorage.setItem("isLoggedIn", false);
}
Ardından vuex'te mutation kısmı;
mutations: {
setUser(state, payload) {
state.user = payload;
},
setLoggedIn(state, payload) {
state.isLoggedIn = payload;
},
},
Actions kısmı;
actions: {
loadStoredState(context) {
context.commit("setLoggedIn", isLoggedIn());
},
async loadUser({ commit, dispatch }) {
if (isLoggedIn()) {
try {
const user = (await axios.get("/user")).data;
commit('setUser', user);
commit('setLoggedIn', true);
} catch (error) {
dispatch('logout');
}
}
},
logout({ commit }) {
commit('setUser', {});
commit('setLoggedIn', false);
logOut();
},
Login işleminde de örneğin Login.vue da istek atıyoruz, uzatmamak için kodların bir kısmını ekliyorum:
methods: {
async login() {
this.loading = true;
this.errors = null;
try {
await axios.get("/sanctum/csrf-cookie");
await axios.post("/login", {
email: this.email,
password: this.password,
remember: this.remember,
});
logIn();
this.$store.dispatch("loadUser");
this.$router.push({ name: "home" });
} catch (error) {
this.errors = error.response && error.response.data.errors;
}
this.loading = false;
},
},
app.js içerisinde de beforeCreate() life-cycle da tetikliyoruz;
beforeCreate() {
this.$store.dispatch("loadStoredState");
this.$store.dispatch("loadUser");
}
Dediğim gibi siz token bazlı çalışıyorsanız bazı şeyler farklı olabilir ama mantığı kavramanız açısından inceleyebilirsiniz.
Genel mantık; state içerisinde kullanıcı bilgilerini saklamak yerine her F5 yapıldığında loadUser action'u tetikleniyor o da axios.get("/user") end-pointe istek atarak kullanıcıyı yeniden çekiyor. Login değilse ya da oturumu düşmüşse zaten Laravel'in middleware'i logine izin vermiyor.
Takip etmiş olduğum kurs; https://www.udemy.com/course/master-laravel-6-with-vuejs-fullstack-development/