登录后，loggedIn状态恢复为false，并且不允许我守护路由。

Question

我在尝试着保护我的路线与 state: { loggedIn: false }, 当我从我的Login.vue组件登录时，目标是触发一个动作。this.$store.dispatch('setLogin') 变态 loggedIn 为true。然后，有一个导航保护，应该是为了防止我看到我的Login.vue和Regester.vue组件。问题是，它看起来就像状态改变为true，但不是基本状态：允许我继续点击 /auth/login 和 /auth/register 航线。

航线

const routes = [
  {
    path: '/auth',
    name: 'auth',
    component: Auth,
    children: [
      { name: 'login', path: 'login', component: Login },
      { name: 'register', path: 'register', component: Register },
    ],
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/logout',
    name: 'logout',
    component: Logout
  }
]

登录组件

login() {
    this.$http.get('/sanctum/csrf-cookie').then(response => {
        this.$http.post('/login', {
            email: this.username,
            password: this.password,
        }).then(response2 => {
            this.$store.dispatch('setLogin')
            this.$store.dispatch('getUser')
            alert(this.$store.state.loggedIn)
            this.$router.push({ name: 'Home' })
        }).catch(error => {
            console.log(error.response.data);
            const key = Object.keys(error.response.data.errors)[0]
            this.errorMessage = error.response.data.errors[key][0]
        })
    });
}

Vuex

export default new Vuex.Store({
  state: {
    loggedIn: false,
    user: JSON.parse(localStorage.getItem('user')) || null,
  },
  mutations: {
    setLogin: (state) => {
      state.loggedIn = true
    },
    SET_USER_DATA (state, userData) {
      localStorage.setItem('user', JSON.stringify(userData))
      state.user = userData;
    },
    removeUser(state) {
      localStorage.removeItem('user');
      state.user = null;
    }
  },
  actions: {
    getUser(context) {
      if (context.state.loggedIn) {
        alert('hit');
        return new Promise((resolve, reject) => {
          axios.get('api/user')
            .then(response => {
              context.commit('SET_USER_DATA', response.data.data)
              resolve(response)
            })
            .catch(error => {
              reject(error)
            })
        })
      }
    },
    setLogin(context){
      context.commit('setLogin')
    }
  },
  modules: {
  }
})

这很奇怪，因为 alert(this.$store.state.loggedIn) 渲染为真，但当我回溯auth链接时，有一个挂载状态提醒，结果是false。

这也是我的导航守护。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
      if (!store.state.loggedIn) {
        next({
            name: 'login',
        })
      } else {
      next()
      }
  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
      if (store.state.loggedIn) {
      next({
          name: 'Home',
      })
      return
      } else {
      next()
      }
  } else {
      next()
  }
})

Answer 1

你需要在本地存储中存储loggedIn用户。

setLogin: (state) => {
 state.loggedIn = localStorage.setItem('loggedIn', 'true')
 state.loggedIn = true
},

那么你的状态应该是这样的：

state: {
    loggedIn: localStorage.getItem('loggedIn') || null,
},