我有什么:
- 具有需要授权的路由和公共(public)路由的路由器
- 具有用户身份验证状态的 vuex
我想要什么:使用 axios
向服务器发送请求以检查用户的身份验证状态 before 加载应用程序(在解析路由器之前) .
router.js
:
import Vue from 'vue'
import Router from 'vue-router'
import store from './store'
Vue.use(Router)
const router = new Router({
...
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/account',
name: 'account',
component: () => import(/* webpackChunkName: "account" */ './views/Account.vue'),
meta: {
requiresAuth: true
}
}
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta.requiresAuth)) {
if (store.state.authStatus)
next()
else
next({name: 'home'})
} else {
next()
}
})
export default router
store.js
:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
authStatus: false
},
mutations: {
setAuthStatus(state, authStatus) {
state.authStatus = authStatus
}
}
})
axios.get(...)
.then(response => {
store.commit('setAuthStatus', true)
})
export default store
main.js
:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
我的问题:当我在浏览器中输入 mydomain.com/acount
时(之前未加载应用程序)并获得授权,无论如何我都会重定向到 home
。重定向后,我看到我已获得授权(我在 Home 组件中设置了一些 DOM 元素,该元素仅对授权用户显示)。
我已经试过了,没有帮助:
store.js
:
const store = new Vuex.Store({
...
actions: {
setAuthStatus({commit}) {
axios.get(...)
.then(response => {
commit('setAuthStatus', true)
})
}
}
})
main.js
:
store.dispatch('setAuthStatus').then(() => {
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
})
编辑:在 main.js
中,我尝试从
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
到
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
它也没有帮助。
最佳答案
四处走动 Vanojx1's answer ,接下来我解决了我的问题。
store.js
:
const store = new Vuex.Store({
state: {
authStatus: axios.get(...).then(response => {
store.commit('setAuthStatus', true)
}),
userAuth: false
},
mutations: {
setAuthStatus(state, authStatus) {
state.userAuth = authStatus
}
}
})
router.js
:
router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta.requiresAuth)) {
store.state.authStatus.then(() => {
//we're getting 200 status code response here, so user is authorized
//be sure that API you're consuming return correct status code when user is authorized
next()
}).catch(() => {
//we're getting anything but not 200 status code response here, so user is not authorized
next({name: 'home'})
})
} else {
next()
}
})
关于vue.js - 在 Vue 路由解析之前访问 Vuex,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52420374/