gpt4 book ai didi

vue.js - Vue.js SSR检查用户已针对每个请求进行身份验证

转载 作者:行者123 更新时间:2023-12-03 06:44:44 32 4
gpt4 key购买 nike

我正在为我的应用程序https://github.com/vuejs/vue-hackernews-2.0使用此ssr样板

我不知道如何实现验证逻辑以针对每个用户的页面请求进行用户身份验证,我正在使用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请求?

最佳答案

回答我的问题,下一个方法-是我搜索的内容,此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))
}
}

关于vue.js - Vue.js SSR检查用户已针对每个请求进行身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48009624/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com