web-dev-qa-db-fra.com

Comment archiver un composant Vue si un utilisateur est authentifié dans Laravel?

Comme le titre l'indique, je suis un peu confus sur la façon dont je traiterais une méthode dans mon composant Vue avec l'instruction if/else selon que l'utilisateur est connecté et authentifié avec la façade Auth de Laravel. Je fais diverses demandes Axios que je dois autoriser/refuser en fonction de la connexion de l'utilisateur.

J'ai installé VUEX et je pensais que je pouvais utiliser le stockage local pour avoir un état pour isLoggedin par exemple que travaille avec Laravel. Mais je ne sais pas si c'est la bonne méthode, ou sécurisée et vraisemblablement Laravel stocke déjà son authentification. Alors, puis-je simplement accéder à cela directement dans Vue?

Certaines solutions impures ici que je ne pense pas sont les meilleures - https://laracasts.com/discuss/channels/vue/hide-button-if-user-is-logged-with-laravel-and- vuejs

Je ne trouve aucun exemple pour cela :(

laravelauthenticationvue.jsvuex
7
Jquestions

Habituellement, à partir de votre contrôleur, vous passez l'objet utilisateur authentifié dans la vue qui sera ensuite stockée dans une variable javascript

Manette:

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

Vous saurez si un utilisateur est authentifié s'il renvoie un objet ou null où null signifie qu'aucun utilisateur n'est authentifié.

Dans votre lame, attribuez le auth_user dans une variable javascript:

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

votre objet de magasin vuex devrait au moins ressembler à ceci:

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

Ensuite, dans votre composant racine Vue, obtenez le auth_user et enregistrez-le dans le magasin:

<script>
    export default {

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

    }
</script>

Vous avez maintenant essentiellement un getter appelé this.$store.getters.isLoggedIn que vous pouvez utiliser dans votre application pour vérifier si un utilisateur est actuellement connecté.

par exemple:

9
Julian Paolo Dayag