Chuyển trạng thái mô-đun vuex vào vue-router trong beforeEach

Question

Tôi đang sử dụng VueJS kết hợp với vuex và vue-router. Tôi có một mô-đun vuex đang tạo đột biến cho cửa hàng của mình và cố gắng sử dụng để xác định liệu người dùng có được xác thực hay không.

Đây là mã của tôi trông như thế nào trong phần liên quan.

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 
} 

Khi Tôi đi qua logic của mình để kích hoạt hành động LOGIN, tôi có thể thấy rằng đột biến được thực thi đúng cách và khi tôi sử dụng tiện ích Chrome để xem trạng thái vuex cho mô-đun core của mình, trạng thái cho user và authenticated đã bị tắt tiếng đúng cách.

HỎI

Nó có vẻ như module này chỉ đơn giản là chưa được nạp vào lúc router đang chạy trong .beforeEach vòng lặp. Điều này có đúng không?

Nếu có, một số đề xuất khác về cách xử lý tình huống này là gì? Nếu không, tôi đang làm gì sai?

Answer 1

console.log(store.state.core.authenticated) trả về false vì bạn chưa đăng nhập.

Trong mã của bạn, bạn không lưu giữ thông tin người dùng ở bất cứ đâu. Ví dụ. bằng localStorage

cân nhắc Same:

1. Không sử dụng router.app.$store, sử dụng store rằng bạn nhập
2. Trong LOGIN_SUCCESS đột biến, lưu trữ thông tin đăng nhập của bạn và Token vào localStorage
3. Trong móc beforeEach, hãy kiểm tra localStorage, nếu được điền bằng mã thông báo, hãy lấy thông tin người dùng và áp dụng đột biến. Nếu không, chỉ cần gọi trang đăng nhập

Something như thế này ..

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() 
    } 
}