반응형
Larabel 백엔드를 사용하여 풀스택 Vue 프런트엔드를 사용하여 로그인/로그아웃하는 방법
같은 서버에서 Larabel 백엔드를 사용하여 완전한 Vue 프론트엔드를 구현하기 위해 매일 밤 고생하고 있습니다.Axi를 사용하면 일반적인 리소스 요청을 정상적으로 처리할 수 있지만 로그인과 로그아웃은 조금 악몽 같은 작업입니다.아이디어가 바닥나서 정말 도움이 필요해요:)
Login Vue 컴포넌트는 다음과 같습니다.
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" required autocomplete="email" autofocus v-model="email">
<!-- <span class="invalid-feedback" role="alert">
<strong>message</strong>
</span> -->
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required autocomplete="current-password" v-model="password">
<!-- <span class="invalid-feedback" role="alert">
<strong>message</strong>
</span> -->
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" v-model="remember">
<label class="form-check-label" for="remember">
Remember Me
</label>
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button @click.prevent="login" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="">
Forgot Your Password?
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
email: null,
password: null,
remember: null,
loading: false
}
},
methods: {
login() {
window.axios.post('login', {
email: this.email, password: this.password
})
.then(response => {
console.log('Login fired!')
console.log(response.data)
})
.catch(error => {
console.log(error)
})
},
},
}
</script>
다음은 앱에 풀링한 '부트스트랩' 파일에 있는 내 axios 설정입니다.js:
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.baseURL = 'http://localhost:8000/api/';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
여기 내 앱이 있습니다.js:
import './bootstrap'
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from './store/store'
import routes from './routes'
import App from './App.vue'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
})
const app = new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
이제 백엔드에서 '인증 완료'와 '로그 완료'를 불러왔습니다.Out' 메서드를 로그인 컨트롤러에 삽입하고 json을 반환합니다.
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
/*
|--------------------------------------------------------------------------
| Login Controller
|--------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = '/home';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
/**
* The user has been authenticated.
*
* @param \Illuminate\Http\Request $request
* @param mixed $user
* @return mixed
*/
protected function authenticated(Request $request, $user)
{
return response()->json('You have successfully logged in', 200);
}
/**
* The user has logged out of the application.
*
* @param \Illuminate\Http\Request $request
* @return mixed
*/
protected function loggedOut(Request $request)
{
return response()->json('You have logged out now.', 200);
}
}
로그인을 시도했을 때 발생하는 문제는 다음 console.log 입니다.
dispatchXhrRequest @ app.js:279
xhrAdapter @ app.js:118
dispatchRequest @ app.js:726
Promise.then (async)
request @ app.js:528
Axios.<computed> @ app.js:553
wrap @ app.js:1071
logout @ app.js:2057
invokeWithErrorHandling @ app.js:42933
invoker @ app.js:43258
original._wrapper @ app.js:48611
app.js:2060 Error: Request failed with status code 500
at createError (app.js:653)
at settle (app.js:899)
at XMLHttpRequest.handleLoad (app.js:166)
app.js:279 XHR failed loading: POST "http://localhost:8000/api/logout".
이 응답은 몇 시간 동안만 받고, 나머지 시간에는 Axios 호출의 응답으로 내 유일한 뷰를 돌려받습니다.
Laravel 웹 루트는 다음과 같습니다.
// Authentication Routes...
Route::post('api/login', 'Auth\LoginController@login');
Route::post('api/logout', 'Auth\LoginController@logout')->name('logout');
// Registration Routes...
Route::post('register', 'Auth\RegisterController@register');
Route::get('{any?}', function () {
return view('index');
// });
// })->where('any', '^(?!api).*$');
})->where('any', '.*');
Vue 라우터는 다음과 같습니다.
{ path: '/login', component: LoginPage },
{ path: '/register', component: RegisterPage },
먼저 폼을 추가한 후 [Submit]버튼을 클릭하여 vuejs 메서드 섹션에서 로그인 메서드를 전송하고 호출합니다.이 경우 Login In vuejs 컴포넌트 메서드에서는 document.getElementById("login_form")를 넣습니다.submit(); Larabel 6을 사용하는 경우 루트 아래에 web.php의 Auth::routes()가 있습니다.php.로부터의 로그인 및 로그아웃 요구는 Auth::routes()로 처리됩니다.vuejs 라우터에 루트를 추가하여 api.php에서 이러한 요구를 처리할 필요가 없습니다.로그아웃 메서드도 같은 방법으로 호출됩니다.
언급URL : https://stackoverflow.com/questions/56588867/how-to-login-logout-using-full-stack-vue-frontend-with-laravel-backend
반응형
'programing' 카테고리의 다른 글
| %*의 형식 지정자는 무엇을 의미합니까? (0) | 2022.07.11 |
|---|---|
| 두 개의 명명된 vuex 모듈 간에 작업을 디스패치하는 방법이 있습니까? (0) | 2022.07.11 |
| Vue-cli 3 - 재료 설계 아이콘 설치 (0) | 2022.07.11 |
| V-inside v-for - 두 열에 항목 목록 표시 (0) | 2022.07.11 |
| @Nullable 및 @Nonnull 주석을 더 효과적으로 사용하는 방법은 무엇입니까? (0) | 2022.07.11 |