Laravel Sanctum - 사용자 베스트 프랙티스 로그인

Laravel Sanctum - 사용자 베스트 프랙티스 로그인

사용자가 아직 클라이언트 측에 로그인하고 있는지 확인하기 위한 베스트 프랙티스가 무엇인지 궁금합니다.

사용자가 로그인한다고 가정해 보겠습니다.성공하면 다음과 같이 주에 저장됩니다.

axios.post('/login').then(() => {
  this.state.loggedInUser = true
});

사용자가 브라우저를 새로 고치면 상태는 손실되지만laravel_session그리고.XSRF-TOKEN는 아직 유효합니다.

페이지를 새로고침할 때마다 미들웨어를 추가하여 현재 로그인하고 있는 사용자의 정보를 가져오도록 요청하는 것이 타당할까요?이런 거?

const authMiddleware = () => {
  axios.get('/user').catch(() => console.error('user is not logged in!'));
};

편집

Sanctum을 SPA 모드로 사용하고 있으니 참고하시기 바랍니다.그래서 토큰이 없어요.

SPA에 Vue 및 Vuex를 사용하여 다음 설정을 사용하여 인증된 사용자를 추적할 수 있었습니다.

store.displaces를 설정합니다.

store.js는 다음 정보를 추적합니다.user그리고.isLoggedIn주.

import { isLoggedIn } from "./utils";
export default {
    state: {
        isLoggedIn: false,
        user: {}
    },
    mutations: {
        setUser(state, payload) {
            state.user = payload;
        },
        setLoggedIn(state, payload) {
            state.isLoggedIn = payload;
        }
    },
    actions: {
        async loadUser({ commit, dispatch }) {
            if (isLoggedIn) {
                try {
                    const user = (await axios.get("/user")).data;
                    commit("setUser", user);
                    commit("setLoggedIn", true);
                } catch (error) {
                    console.log(error)
                }
            }
        }
    }
};

utils.displays(유틸리티).

utils.js에는 로컬스토리지에서 설정 및 로그인을 위한 도우미가 포함되어 있습니다.

  
export function isLoggedIn() {
    return localStorage.getItem("isLoggedIn") == "true";
}

export function logIn() {
    localStorage.setItem("isLoggedIn", true);
}

Login.vue

로그인 중.Vue, 내가 전화할게logIn()utils.js에서 localStorage의 isLoggedIn 값을 설정합니다.

또,loadUserVuex 스토어에서 사용자 정보를 설정하기 위해 액션을 디스패치하고 있습니다.

<script>
import { logIn } from "../utils";
 methods: {
        async login() {
            try {
                await axios.get("/sanctum/csrf-cookie");
                await axios.post("/login", {
                    email: this.email,
                    password: this.password
                });
                logIn();
                this.$store.dispatch("loadUser");
                this.$router.push('/');
            } catch (error) {
                console.log(error);
            }
        }
    }
</script>

App.js

그loadUser로그인 시 사용자의 정보를 글로벌하게 사용할 수 있도록 하기 위한 조치도 여기에 발송됩니다.

const app = new Vue({
    ...
    async beforeCreate() {
        this.$store.dispatch("loadUser");
    }
});

sessionStorage에 저장하고 로그를 초기화합니다.sessionStorage의 InUser:

sessionStorage.getItem('loggedInUser') === 'true' || false

언급URL : https://stackoverflow.com/questions/63038216/laravel-sanctum-logged-in-user-best-practise