Laravel Sanctum - 登录用户最佳实践

Question

我想知道检查用户是否仍然登录客户端的最佳实践是什么。

假设用户登录。如果成功，它将被保存在状态中，如下所示：

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!'));
};

编辑

请注意，我在 SPA 模式下使用 Sanctum。所以没有代币。

Answer 1

在我的 SPA 中使用 Vue 和 Vuex，我成功地使用以下设置跟踪经过身份验证的用户：

商店.js

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)
                }
            }
        }
    }
};

实用程序.js

utils.js 包含用于从本地存储设置和获取登录状态的帮助程序。

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

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

登录.vue

在login.vue中，我logIn()从utils.js调用来设置LocalStorage中的isLoggedIn值。

此外，loadUser正在调度该操作以在 Vuex 存储中设置用户信息。

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

应用程序.js

该loadUser操作也会在此处调度，以使用户的信息在登录后全局可用。

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