Всем привет!)
Я использую Laravel + Vue + Vue router + Sociality (Steam auth) и не понимаю, как нужно отправлять запрос в Steam авторизацию, чтобы моё SPA приложение получило корректный ответ.
Когда я ещё не использовал Vue, то направлял пользователей через web.php на обычные роуты, а они уже попадали на страницу стим и проходили авторизацию с последующим редиректом на наш сайт.
Пример кода раньше:
Route::get('/steam/auth', [AuthController::class, 'SteamAuth'])->name('auth.steam');
Route::get('/steam/callback', [AuthController::class, 'SteamCallBack']);
Route::get('/logout', [AuthController::class, 'logout'])->name('logout.steam');
Так как я начал использовать Vue + Vue-router, то не совсем понимаю, что нужно сделать, чтобы реализовать авторизацию без обновления страницы. Да даже если с обновлением, то тоже не могу понять.
Пример кода сейчас (Это компонент VUE):
<template>
<div>
<!-----#####################----->
<header>
<div class="logo">
<a href="/public">QDAYZ</a>
</div>
<div class="nav">
<ul>
<li v-for="link in links">
<router-link :to="link.href">{{ link.title }}</router-link>
</li>
<button @click="loginSteam" >Войти через стим</button>
</ul>
</div>
</header>
<!-----#####################----->
</div>
</template>
<script>
export default {
name: "v-header.vue",
data(){
return {
links: [
// ----- Admin block ---------------------------------------------
//-----------------------------------------------------------------
// ----- Users block ---------------------------------------------
{
title: "Магазин",
href: "/shop",
},
{
title: "Войти",
href: "api/steam/auth",
},
//-----------------------------------------------------------------
// ----- Default Pages --------------------------------------------
//-----------------------------------------------------------------
]
}
},
methods: {
loginSteam(){
axios.get('api/steam/auth').then( res =>{
console.log(res.data)
}
)
}
},
}
</script>
<style scoped>
</style>