我正在为我的应用使用此ssr样板,https://github.com/vuejs/vue-hackernews-2.0
我不知道如何为每个用户的页面请求实现用户身份验证的检查逻辑,我使用cookie来存储用户的token
我看起来路由器可以在渲染组件之前处理请求:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
// isLoggedIn()
// .then(response => response.json())
// .then(json => {
// console.log(json[0])
// next()
// })
// .catch(error => {
// console.log(error)
// next()
// })
const x = true
if (!x) {
next({
path: '/signin',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
return router
}
但是这里有问题,路由器开始在客户端和服务器端使用这个代码,在我的情况下有点不正确。
如何仅在is user authenticated
发送一次,或在客户端或服务器端发送请求?
答案 0 :(得分:2)
回答我的问题,接下来的方法 - 是我搜索的,这个vue路由器中间件会在发送其他请求之前检查用户(在我的组件方法中使用asyncData
),然后将用户的信息存入商店:
// router/index.js
export function createRouter (cookies) {
const router = new Router({ ... })
router.beforeEach((to, from, next) => {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (to.matched.some(record => record.meta.requiresAuth)) {
if (router.app.$store) {
router.app.$store
.dispatch('FETCH_CURRENT_USER', cookies)
.then(next)
.catch(() => next('/signin'))
} else {
next()
}
} else {
next()
}
return router
}
// store/actions.js
export default {
FETCH_CURRENT_USER: ({ commit }, cookie) => {
const values = {
credentials: 'include',
headers: {
'Content-Type': 'application/json',
Origin: FRONTEND_HOST,
Cookie: cookie
}
}
return fetch(`${API_HOST}/api/v1/users/me`, values)
.then(handleStatus)
.then(handleJSON)
.then(json => commit('SET_CURRENT_USER', json))
}
}