Laravel 인증과 Vue-router를 함께 사용하는 방법

Laravel 인증과 Vue-router를 함께 사용하는 방법

나는 라라벨과 PHP는 일반적으로 처음 접하지만, Vue와 SPA는 잘 알고 있다.예를 들어, 나는 Bcrypt로 인증을 만드는 방법을 알고 있다.하지만 나는 라라벨을 이용해 달렸다.php artisan make:auth백엔드에 대해 여러 개의 다른 엔드포인트를 만드는 것.

나는 Vue를 사용하여 내 앱을 SPA로 변환하려고 했지만, Vue와의 라우팅을 사용하면 web.php에 정의된 루트에 문제가 발생한다.예를 들어, 나는 몇 가지 다른 경로를 가진 내 웹.php를 가지고 있다.

<?php

Route::get('/{vue_capture?}', function () {
    return view('app');
 })->where('vue_capture', '^(?!storage).*$'); 

Route::get('/', function () {
    return view('app');
});
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController@search')->middleware('auth');

Auth::routes();

Route::get('/settings/account', 'AccountsController@edit')->middleware('auth');
Route::get('/auth', 'AccountsController@get');
Route::put('/settings/account', 'AccountsController@update')->middleware('auth');

그러나, 나는 또한 다음과 같은 방법으로 Vue-roouter가 라우팅을 처리하도록 하는 루트를 가지고 있다.

import Home from './components/Home.vue'
import Videos from './components/Videos.vue'
import Categories from './components/Categories.vue'

export default{
    mode: 'history',


    routes: [
        {
            path:'/',
            component:Home
        },

        {
            path:'/Videos',
            component:Videos
        },
        {
            path:'/Categories',
            component:Categories
        },
        {
            path:'/login',
            component:login
        },
        {
            path:'/register',
            component:register
        },
        {
            path:'/logout',
            component:logout
        }
    ]
}

SPA를 이용하면 Vue가 라우팅을 대신하게 되어 있는 것으로 알고 있는데, 둘 다 사용할 수 있는 방법이 없을까?이 문제를 해결할 수 있는 어떤 것도 찾을 수 없지만 라라벨이 당신이 그들의 기본 명령어를 이렇게 사용하게 만들었다는 것을 믿을 수 없다.php artisan make:auth또는 라우팅을 포함한 SPA를 원할 경우 이 모든 것을 취소하고 수동으로 수행해야 한다.

나는 라라벨이나 부에를 사용하면서 여러 가지 CRUD 투루토리얼을 경험해 보았다.나는 부에 가는 모든 루트를 부에로터에게 라우팅을 담당하도록 지시해 보았다.나는 부에루터에게 모든 라우팅을 주지 않았고 웹.php에서 내가 가지고 있던 백엔드 루트를 유지하려고 노력하지 않았다.

다른 반관련 문제점은 내 루트가 링크로 보이지도 않는다는 것이다.router-link. 그냥 보통 텍스트로 나타난다.그러나 지금 우선 나의 우선순위는 라우팅 문제야.

당신은 Vue 루트와 Laravel 루트를 결합할 수 있다.하지만 최상의 결과를 위해, 나는 당신이 스파를 만들고 있기 때문에 vue 라우터를 사용하는 것을 추천한다.

1. 제거하다

Route::get('/', function () {
    return view('app');
});

2. 모든 백엔드 루트를 당신의 vue를 가리키는 경로 앞에 놓으시오.

Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController@search')->middleware('auth');

Auth::routes();

Route::get('/settings/account', 'AccountsController@edit')->middleware('auth');
Route::get('/auth', 'AccountsController@get');
Route::put('/settings/account', 'AccountsController@update')->middleware('auth');

Route::get('/{vue_capture?}', function () {
    return view('app');
 })->where('vue_capture', '^(?!storage).*$'); 

또한 백엔드에서 충돌하는 경로가 없는지 확인하십시오(실행).php artisan route:list당신의 laravel route list)와 vue route.이게 도움이 되었으면 좋겠어.

합격된 답은 완벽하다(나는 상향조정했지만 아직 그것을 셀 수 있는 사람이 없다) 그리고 나에게 잘 먹혔지만, 내가 '덤미' 부메랑 요소들을 만들고 그것들을 수입해서 노선과 함께 일해야 한다는 조건하에서만 잘 작동했다.이것이 도움이 되기를!

import Login from './auth/Login'
import Register from './auth/Register'
import Logout from './auth/Logout'

{ path:'/login', component:Login },
{ path:'/register', component:Register },
{ path:'/logout', component:Logout },

대신 이것만 써도 돼.

Route::get('/{vue_capture?}', function () {
    return view('app');
 })->where('vue_capture', '^(?!storage).*$')->middleware('auth');

참조URL: https://stackoverflow.com/questions/55318370/how-to-use-laravel-authentication-and-vue-router-together