nuxtjs中的jwt整合方案问题求助
最近在写一个项目,为了兼容SEO选择了nuxtjs。
目前在用户登录鉴权中遇到1个比较头疼的问题,已百度或google近几小时都没解决问题。
需要寻求帮助的地方是
在nuxtjs中如何进行用户登录校验?
当用户登录成功后,服务端会返回用户token,我便直接把token存在cookie和store中.
用于后续在在SSR请求和client请求;
于是我便在 nuxtServerInit 中这么写(每次刷新页面store都需要重新更新)
async nuxtServerInit ({ dispatch, commit, state }, { req }) {
// 通过cookie获取token信息
// 该token由用户登录接口返回并存放在cookie中
const obj = cookie.parse(req.headers.cookie)
if (obj.token) {
//把token存在Authorization中,以便在ssr中调用
req.headers['Authorization'] = obj.token
// 把token存放在store里,以便在客户端调用
commit('user/SET_TOKEN', obj.token)
} else {
commit('user/CLEARN_TOKEN')
}
}
这里有个问题,就是我的token
是有失效性的,当token
存在的时候,我每次请求都需要先去校验一下token
是否过期。如果过期我得提示用户去登录或者返回上一页。
由于在nuxtServerInit
中不能使用异步,于是我便在middleware
中增加了一个auth.js
用于校验token
并做相关跳转~
例如:
使用场景:“当我进入到个人中心是的时候”:
auth.js
如果token存在
1-1.异步请求校验token
1-2.如果token没有过期,那么就继续进入该页面
1-3.如果token已过期,那么跳转到登录页去,并清空store及cookie相关信息。请问在middleware里如何清除cookie?
如果token不存在
2-1. 跳转到相关页面去
export default function ({ store, $axios, route, redirect, req}) {
// 该token是从cookie中获取的
const obj = cookie.parse(req.headers.cookie)
if (obj.token) {
// 异步校验token是否过期
$axios.isTokenIspire().then(res => {
// 如果token没有过期
store.commit('user/SET_TOKEN', obj.token)
const toPrevPageWhiteList = store.state.toPrevPageWhiteList
const toPrevPage = toPrevPageWhiteList.some(item => {
return item === route.name
})
// 如果当前路由在返回上一页的白名单里,否者就返回到主页
if (toPrevPage) {
const referer = req.headers.referer
if (referer) {
// 返回上一页
return redirect(referer)
}
// 返回到主页
return redirect('/')
} else {
return redirect(route.path)
}
})
}
console.log('==========如果token 不存在=========')
// 清除有关user的数据
store.dispatch('user/clearnToken')
// 如果token不存在,或者已过期
const toLoginWhiteList = store.state.toLoginWhiteList
// 如果当前路由在返回登录页的名单里,就返回登录页
const toLogin = toLoginWhiteList.some(item => {
return item === route.name
})
if (toLogin) {
// 返回到登录页
return redirect('/account/login')
}
}
以上代码产生的问题是,我如何清除相关的cookie和store?
其他问题:nuxtjs 结合 jwt 有没更好的方案?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论