web-dev-qa-db-ja.com

ユーザーがLaravelで認証されている場合、Vueコンポーネントをチェックインするには？

タイトルが示すように、VueコンポーネントがユーザーがログインしてLaravelのAuthファサードで認証されているかどうかに基づいてif/elseステートメントでメソッドに取り組む方法を少し混乱しています。ユーザーがログインしたかどうかに基づいて許可/禁止する必要があるさまざまなAxiosリクエストを作成しています。

VUEXのセットアップがあり、isLoggedinの状態を取得するためにローカルストレージを使用できると考えていましたたとえば、Laravelで動作します。しかし、これが正しい方法なのか、安全でおそらくLaravel=はすでにその認証を保存しているのかわかりません。Vueで直接アクセスできますか？

ここでは、私が最良とは思わないいくつかの不潔なソリューション- https://laracasts.com/discuss/channels/vue/hide-button-if-user-is-logged-with-laravel-and- vuejs

私はこれの例を見つけることができません:(

laravelauthenticationvue.jsvuex
7
Jquestions

通常、コントローラーから、認証されたユーザーオブジェクトをビューに渡し、それがjavascript変数に格納されます

コントローラ：

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

ユーザーがオブジェクトを返す場合はユーザーが認証されているか、nullはユーザーが認証されていないことを意味します。

ブレードで、auth_userをjavascript変数に割り当てます。

<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>

これで、ユーザーが現在ログインしているかどうかを確認するためにアプリケーションで使用できるthis.$store.getters.isLoggedInというgetterが基本的にできました。

例えば：

9
Julian Paolo Dayag