사용자가 Laravel에서 인증된 경우 Vue 구성 요소를 체크인하는 방법

사용자가 Laravel에서 인증된 경우 Vue 구성 요소를 체크인하는 방법

제목이 말해주듯, 사용자가 로그인하고 Laravel의 Auth facade로 인증되었는지에 기반한 if/else 문장으로 내 Vue Component의 메소드를 어떻게 다루어야 할지 약간 혼란스럽다.나는 사용자가 로그인했는지 여부에 따라 허용/허용해야 하는 다양한 Axios 요청을 하고 있다.

VUEX를 설정했으며 로컬 스토리지를 사용하여 iSLoggedin의 상태를 예를 들어 Laravel과 함께 사용할 수 있다고 생각 중이었습니다.하지만 이게 올바른 방법인지, 아니면 라라벨이 이미 인증확인을 저장하고 있는 것인지는 잘 모르겠다.그럼 내가 부에 있는 그 직장에 접속해도 될까?

내가 생각하기에 최고라고 생각하지 않는 불결한 해결책들 - https://laracasts.com/discuss/channels/vue/hide-button-if-user-is-logged-with-laravel-and-vuejs

이에 대한 예를 찾을 수 없다().

일반적으로 컨트롤러에서 인증된 사용자 객체를 뷰로 전달하여 Javascript 변수에 저장

컨트롤러:

public function index()
{
    return view('index', [
        'auth_user' => Auth::user()
    ]);
}

사용자가 객체를 반환하거나 null인 경우 사용자가 인증되지 않았는지 여부를 알 수 있으며, 여기서 null은 사용자가 인증되지 않았음을 의미한다.

블레이드에서auth_user자바스크립트 변수에 다음과 같이 입력한다.

<script>
    window.auth_user = {!! json_encode($auth_user); !!};
</script>

vuex 저장소 개체는 최소한 다음과 같아야 한다.

{
    state: {
        user: null
    },
    mutations: {
        setAuthUser(state, user) {
            state.user = user;
        }
    },
    getters: {
        isLoggedIn(state) {
            return state.user !== null;
        }
    }
}

그런 다음 Vue 루트 구성 요소에서auth_user저장소에 저장:

<script>
    export default {

        mounted() {
            this.$store.commit('setAuthUser', window.auth_user);
        }

    }
</script>

당신은 이제 기본적으로getter불렀다this.$store.getters.isLoggedIn응용 프로그램에서 사용자가 현재 로그인되어 있는지 여부를 확인하는 데 사용할 수 있음.

예:

공리 절편기를 사용하십시오.액세스 거부 http 응답 코드를 차단한 다음 그에 따라 조치하십시오.

window.axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    if (419 === error.response.status) {
         location.reload();
    } else {
        //Something else you want to do or do nothing
    }
});

블레이드 파일에 스크립트를 넣으면 Vue Warning이 발생한다."사용자가 Laravel에서 인증된 경우 Vue 구성 요소를 체크인하는 방법"에 답하고 Vuex 복잡성은 그대로 두십시오.또한 이 방법은 더 간단하다.

컨트롤러에서 다음을 수행하십시오.

public function index()
{
    return view('index')->with('auth_user',  auth()->user());
}

블레이드(main.blade.php):

<div class="container">
    <example-component :auth_user='@json($auth_user)'></example-component>
</div>

vue 구성 요소에서 소품(예:Component.vue):

<script>
export default {

  props: ['auth_user'],

  created () {
    console.log(this.auth_user)

  }
}
</script>

사용자가 로그인하지 않은 경우 null 반환

나는 laravel 7+와 함께 일하고 있는데 컨트롤러를 통해 Auth::user()를 보낼 필요가 없어. 아래처럼 당신의 laravel 블레이드 템플릿 파일에서 호출하면 돼.

당신의 이름.properties.properties.propertiesphp

@if (Auth::check())
    <script>window.authUser={!! json_encode(Auth::user()); !!};</script>
@else
    <script>window.authUser=null;</script>
@endif

구성 요소 내부.vue, 다음과 같은 authUser 저장:

<script>
    export default {
        data() {
            return {
                authUser: window.authUser
            }
        },

        created() {
            console.log(this.authUser);
        },

        methods: {
            yourMethodName() {
                console.log(this.authUser);
            }
        }
    }
<script>

참조URL: https://stackoverflow.com/questions/51329297/how-to-check-in-a-vue-component-if-a-user-is-authenticated-in-laravel