我将VueJS与vuexvue-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操作时,我可以看到Mutations 正确执行,当我使用Chrome扩展查看core模块的vuex状态时,userauthenticated的状态已经正确Mutations .

QUESTION

似乎路由在.beforeEach环路中运行时,这个模块还没有加载.这是真的吗?

如果是,关于如何处理这种情况,还有哪些其他建议?

推荐答案

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

在你的代码中,你不能在任何地方保存用户信息.例如,使用本地存储

同样的考虑:

  1. 不要使用router.app.$store,使用导入的store
  2. 在您的应用程序中,将登录信息和令牌存储到localstorage中
  3. 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()
    }
}

Vue.js相关问答推荐

Vue.js编译的render函数不起作用

视图中的 vue 样式不适用于 html

如何在 vue2.7 中删除 slot-scope

使用 cypress 进行 e2e 测试的 vuejs 期间出现 Webpack 错误

已分配计算(computed)属性,但它没有设置器

在 Vue 文件中创建根 Vue 实例

vue.js 在 App.vue 中获取路由名称

如何在map中添加新的标记 onclick?

即使响应为 200,也会调用 Axios Catch

如何只查看数组中的一个对象?

在 vue 组件中检索配置和环境变量

如何将 vue.js 与 gulp 一起使用?

在渲染组件之前从 api 获取数据

vuetify:以编程方式显示对话框

基于条件的VueJS HTML元素类型

从 Axios 响应中解析 XML,推送到 Vue 数据数组

在组件之间共享数据

如何从 vue-apollo 中访问 this.$route?

如何从 vue 组件调用 App.vue 中的方法

Vuetify v-data-table 固定标题不起作用