Nuxt-Laravel Live Auth System
- Düzenlendi
omeruzer localde aynı domain altında çalıştığınız için token'ı cookie içinde kontrol ediyor. Bu Sanctum'u diğer geleneksel auth çözümlerinden ayıran özelliği. Farklı domaine geçince sizden header içinde Authorization: Bearer <token> şeklinde token bekliyor artık. Sizin Nuxt ile yazdığınız uygulamanın artık mobil uygulamadan bir farkı yok.
@omeruzer lütfen açtığın konu başlıklarının tamamını büyük harflerle yazma.
https://laravel.gen.tr/p/3-kullanim-kosullari
omeruzer login adresine istek attıktan sonra frontend tarafında token'ı tutup axios'a vereceksiniz:
const token = ...
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;gibi. Böylece axios her istekte token da gönderecek.
Frontend tarafında token localStorage'de mi tutulmalı başka şekilde mi tutulmalı vs bir çok tartışma var. Bunu araştırarak frontend tarafında token'ı nasıl tutacağınıza karar verebilirsiniz.
mgsmus bu şekilde mi yapılması lazım bu şekilde işe yaramadı çünkü yine 200 dönüyor ama login olmuyor
async login() {
await this.$auth
.loginWith("laravelSanctum", { data: this.form })
.then((result) => {
if (result.data.message == "Success") {
this.$axios.defaults.headers.common["Authorization"] = `Bearer ${response.data.token}`;
this.$router.push("/dashboard");
} else {
this.isError = true;
}
})
.catch((err) => {
this.isError = true;
});
},token ı response.data.token olarak döndürüyorum
omeruzer login olma diye bir şey yok, o stateful uygulamalara ait bir terim. Siz artık stateless ilerliyorsunuz, sunucuda sizi tutan bir yapı yok, o yüzden sizi tanımak için sizden her istekte token bekliyor. Vue router kullanmışsınız, demek ki her rota isteğinden önce token kontrolü de yapmanız gerekiyor:
https://router.vuejs.org/guide/advanced/navigation-guards.html
mgsmus vue değilde nuxt kullandım middleware var
export default async function ({ $auth, redirect }) {
const user = await $auth.loggedIn
if (user) {
// let the user see the page
} else {
// redirect to homepage
redirect('/')
}
}bu şekilde nuxt ın özel yapılarıyla kontrol ediyorum fakat sorun login olduktan sonra oluşturduğum token oluşuyor ama devam etmiyor işlemler
- Düzenlendi
omeruzer Nuxt dokümanlarına baktım, Sanctum için provider varmış. Nuxt kullanmadığım için bunu bilmiyordum, sizin kodlar şimdi anlam kazandı benim tarafta. Sanctum sağlayıcısını inceledim, cookie şeması kullanıyormuş, dokümanda yazıyor ama siz ayrı domainlerde haberleşeceğiniz için siz local şema kullanacaksınız. Zaten dokümanda da "local is the default, credentials/token based scheme for flows like JWT" şeklinde belirtmiş:
https://auth.nuxtjs.org/schemes/local
auth: {
strategies: {
local: {
token: {
property: 'token',
global: true,
// required: true,
// type: 'Bearer'
},
user: {
property: 'user',
// autoFetch: true
},
endpoints: {
login: { url: '/api/auth/login', method: 'post' },
logout: { url: '/api/auth/logout', method: 'post' },
user: { url: '/api/auth/user', method: 'get' }
}
}
}
}mgsmus Login sorununu şu şekilde çözdüm.
async login() {
await this.$axios.$get("/sanctum/csrf-cookie");
await this.$axios
.post("https://123.com/api/login", {
email: this.email,
password: this.password,
})
.then((resp) => {
this.$auth.setUserToken("local", "Bearer " + resp.data.token);
this.$axios.setHeader("Authorization", "Bearer " + resp.data.token);
this.$auth.ctx.app.$axios.setHeader(
"Authorization",
"Bearer " + resp.data.token
);
this.$axios.get("https://123.com/api/user").then((res) => {
this.$auth.setUser(res.data);
this.$router.push("/dashboard");
});
});
},fakat şu şekilde user a istek atıyor ama 401 dönüyor. token ı eklediğimde sorun çözülücek gibi bu fonksiyonu internette buldum
Sağlık olsun, kolay gelsin.
o şekil ilerlemeye çalışıyorum sizden cevap beklerken bulmuştum