登录成功以后，点击页面刷新，会回到登录页面

Question

一个后台管理，登录成功以后，点击页面刷新，会回到登录页面，这个怎么解决？

Answer 1

该回答引用ChatGPT
可以使用 Vuex 进行状态管理来解决这个问题。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以让您在整个应用程序中共享和管理状态。

当登录成功时，将登录状态存储在 Vuex 中。当页面刷新时，可以从 Vuex 中读取登录状态，以判断用户是否已经登录。如果用户已经登录，则将其重定向到相应的页面；如果用户未登录，则将其重定向到登录页面。

这样，就可以解决页面刷新后回到登录页面的问题。

以下是一个简单的示例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoggedIn: false
  },
  mutations: {
    setLoginStatus (state, status) {
      state.isLoggedIn = status
    }
  }
})

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      isLoggedIn: state => state.isLoggedIn
    })
  },
  beforeCreate () {
    if (!this.isLoggedIn) {
      this.$router.push('/login')
    }
  }
}
</script>