这是我的混音
export default {
created () {
if (!this.$store.getters.isAuthenticated) {
this.$router.replace('/start')
}
}
}
这是我的组成部分: -
import Auth from '../auth'
export default {
mixins: [Auth],
computed: {
orders () {
return this.$store.getters.orders
}
},
mounted () {
this.$store.dispatch('getOrders')
}
}
商店:-
async getOrders ({ commit, state }) {
const res = await axios.get(`${API_URL}/orders`, {
headers: {
'authorization': state.currentUser.token
}
})
commit('setOrders', res.data)
}
我面临的问题是,虽然当我去'/start'
时它确实重定向到'/orders'
,但它也开始从mounted
钩子获取命令,并且因为currentUser
为null它给TypeError
Cannot read property 'token' of null
。虽然我可以通过检查是否设置getOrders
来保护我的currentUser
函数,但是我必须在许多其他函数中执行它。我想要发生的是,在created
挂钩安装后不应该被调用或任何其他人知道更好的技术?
而不是检查它,用户在mixin中使用global navigation guards进行身份验证。
您可以使用beforeEach
或beforeResolve
来检查currentUser
是否为空。
import store from './store'; // import your Vuex store
const router = new VueRouter({
routes: [{
name: 'orders',
path: '/orders',
meta: {
requiresAuth: true // use this in the routes that need your currentUser
}
}],
});
router.beforeResolve((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!this.$store.getters.isAuthenticated || !store.state.currentUser) {
next({
name: 'forbidden' // the route the guest will be redirected to
});
} else {
next();
}
} else {
next();
}
});
export default router;
你可以使用路由功能beforeRouteEnter
,如果app没有authed,你可以在进入页面之前重定向到其他页面需要auth