nuxtjs中的jwt整合方案问题求助

发布于 2022-09-12 02:24:22 字数 2546 浏览 13 评论 0

最近在写一个项目,为了兼容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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文