Question

我是 vue.js 的新手，我有一个简单的 Web 应用程序（Vue 前端连接到 FastAPI 后端），用户可以创建一个帐户并登录，到目前为止所有这些都有效，但是当我刷新页面时，用户已注销。

并且控制台显示错误：

Uncaught (in promise) TypeError: Cannot read property '$store' of undefined

我做错了什么？即使在页面刷新后如何保持用户登录。谁能帮帮我吗？？谢谢

store/index.js

import Vuex from 'vuex';
import Vue from 'vue';
import createPersistedState from "vuex-persistedstate";
import auth from './modules/auth';

// Load Vuex
Vue.use(Vuex);
// Create store
const store = new Vuex.Store({
  modules: {
    auth
  },
  plugins: [createPersistedState()]
});

export default store

store/modules/auth.js

import { postUserLogInAPI } from "../../service/apis.js";

const state = {
    token: "",
    expiration: Date.now(),
    username: ""
};
const getters = {
    getToken: (state) => state.token,
    getUsername: (state) => state.username,
    getFullname: (state) => state.fullname,
    isAuthenticated: (state) => state.token.length > 0 && state.expiration > Date.now()

};
const actions = {
    async LogIn({ commit }, model) {
        await postUserLogInAPI(model).then(function (response) {
            if (response.status == 200) {
                commit("LogIn", response.data)
            }
        })
    },
    async LogOut({ commit }) {
        commit('LogOut')
    }
};
const mutations = {
    LogIn(state, data) {
        state.username = data.username
        state.fullname = data.fullname
        state.token = data.token
        state.expiration = new Date(data.expiration)
    },
    LogOut(state) {
        state.username = ""
        state.fullname = ""
        state.token = ""
        state.expiration = Date.now();
    },
};
export default {
    state,
    getters,
    actions,
    mutations
};

服务/http.js

import axios from 'axios'
import { Loading, Message } from 'element-ui'
import router from '../router/index.js'
import store from '../store';

let loading

function startLoading() {
    loading = Loading.service({
        lock: true,
        text: 'Loading....',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}

function endLoading() {
    loading.close()
}

axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://0.0.0.0:80/';

axios.interceptors.request.use(
    (confing) => {
        startLoading()
        
        if (store.getters.isAuthenticated) {
            confing.headers.Authorization = "Bearer " + store.getters.getToken
        }
        return confing
    },
    (error) => {
        return Promise.reject(error)
    }
)

axios.interceptors.response.use(
    (response) => {
        endLoading()
        return response
    },
    (error) => {
        Message.error(error.response.data)
        endLoading()

        const { status } = error.response

        if (status === 401) {
            Message.error('Please Login')
            this.$store.dispatch('LogOut')
            router.push('/login')
        }
        return Promise.reject(error)
    }
)

export default axios

组件/NavBar.vue

<script>
export default {
  name: "NavBar",
  computed: {
    isLoggedIn: function () {
      return this.$store.getters.isAuthenticated;
    },
    username: function () {
      return this.$store.getters.getUsername;
    },
    fullname: function () {
      return this.$store.getters.getFullname;
    },
  },
  methods: {
    async logout() {
      await this.$store.dispatch("LogOut");
      this.$router.push("/login");
    },
  },
};
</script>

如何在 FastAPI 和 Vue 中的页面刷新之间保持用户登录

0 个答案: