在beforeEach期间将vuex模块状态传递到vue-router-Java 学习之路

我将VueJS与 vuex 和 vue-router 结合使用 . 我有一个 vuex 模块正在对其商店进行变异，并尝试使用它来确定用户是否经过身份验证 .

这是我的代码在相关部分中的样子 .

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

router.beforeEach((to, from, next) => {
    console.log(router.app) // prints a Vue$2 object
    console.log(router.app.$store) // undefined
    console.log(store.getters.isAuthenticated) // false
    ...
}

const app = new Vue({
  store,
  router,
  ...App
})

app.$mount('#app')

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import core from './modules/core'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    core: core
  }
})

export default store

/store/modules/core.js

import * as types from '../types'
import api from '../../api'
import router from '../../router'

const state = {
  token: null,
  user: null,
  authenticated: false
}

const mutations = {
  [types.LOGIN_SUCCESS] (state, payload) {
    console.log('mutate')
    state.token = payload.token
    state.user = payload.user
    state.authenticated = true
    router.go('/')
  }
}

const getters = {
  isAuthenticated: state => {
    return state.authenticated
  }
}

const actions = {
  [types.LOGIN] (context, payload) {
    api.getToken(payload).then(response => {
      context.commit(types.LOGIN_SUCCESS, response)
    })
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

当我通过我的逻辑触发 LOGIN 动作时，我可以看到突变正确执行，当我使用Chrome扩展程序查看我的 core 模块的vuex状态时， user 和 authenticated 的状态已被正确改变 .

QUESTION

看起来这个模块只是在路由器在 .beforeEach 循环中运行时才加载 . 这是真的？

如果是，那么关于如何处理这种情况的其他一些建议是什么？如果不是，我做错了什么？

1 回答

console.log(store.state.core.authenticated) 因为您尚未登录而返回false .

在您的代码中，您不会在任何地方保留用户信息 . 例如 . 使用localstorage

同样的考虑：

不使用 router.app.$store ，请使用您导入的 store
在 LOGIN_SUCCESS 变异中，将登录信息和令牌存储到localstorage中
在 beforeEach 钩子中，检查localstorage，如果填充了令牌，则获取用户信息并应用突变 . 如果没有，只需调用登录页面即可

像这样的东西......

const mutations = {
  [types.LOGIN_SUCCESS] (state, payload) {
    state.token = payload.token
    state.user = payload.user
    state.authenticated = true
    localstorage.setItem('token', payload.token)
    localstorage.setItem('user', payload.user)
  }
}

const actions = {
  [types.LOGIN] (context, payload) {
    return api.getToken(payload).then(response => {
      context.commit(types.LOGIN_SUCCESS, response)
      return response
    })
  }
}

router.beforeEach((to, from, next) => {
    let user = localstorage.getItem('user')
    let token = localstorage.getItem('token')
    if (user && token) {
      store.commit(types.LOGIN_SUCCESS, {token, user})
      next()
    }
    else if (!store.getters.isAuthenticated) {
      store.dispatch(types.LOGIN).then(() => next())
    } else {
      next()
    }
}

回复于 2024-04-29T21:49:53+08:00

在beforeEach期间将vuex模块状态传递到vue-router

1 回答

相关问题