Laravel登录用户最佳实践

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

编辑

请注意，我正在使用Sanctum的SPA模式。所以这里没有代币。

Answer 1

使用Vue和Vuex作为我的SPA，我设法使用以下设置跟踪通过身份验证的用户：

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

utils.js

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

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

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

Login.vue

在login.vue中，我从utils.js调用logIn()来设置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>

App.js

loadUser操作也被分派到这里，以便在登录时使用户的信息在全球范围内可用。

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

Answer 2

将其存储在sessionStorage中，并将loggedInUser从sessionStorage初始化为：

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