我試圖通過檢查用戶是否經過身份驗證來保護我的路由,這是示例路由:
{
path: '/intranet',
component: search,
meta: { requiresAuth: true },
props: {
tax: 'type',
term: 'intranet-post',
name: 'Intranet'
}
},
我正在這樣設置警衛:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
let authenticated = this.$store.getters['auth/getAuthenticated'];
if (!authenticated) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
這是auth的vuex模塊:
import Vue from "vue";
export default {
namespaced: true,
state: {
authenticated: !!localStorage.getItem("token"),
token: localStorage.getItem("token")
},
mutations: {
login: function(state, token){
state.authenticated = true;
state.token = token;
},
logout: function(state){
state.authenticated = false;
state.token = '';
}
},
actions: {
login: function({commit}, token){
localStorage.setItem('token', token);
commit('login', token);
},
logout: function({commit}){
localStorage.removeItem("token");
commit('logout');
}
},
getters: {
getToken: (state) => state.token,
getAuthenticated: (state) => state.authenticated,
}
}
但是,當我嘗試訪問auth getter時,就像路由防護中顯示的那樣,我收到一個錯誤:
無法讀取未定義的屬性'getters'
我做錯了什么,我該如何解決這個問題?