Nuxt.js 用户认证的另一条路

vue.jsNuxt.jsNode.js

发表时间:
作者:Ivan
热度:0

前言

本文主要从 nuxt.js 入手讲解,用户身份鉴权思路在上一篇文章有分析,这里不再赘叙。

技术栈

  • vue 2.5.2
  • nuxt.js 1.3.0
  • node.js 8.9.4
  • nest.js

分析和实现

首先,我们同时且独立地使用 jwtsession 技术,值得注意的是我们不是重新发明了这两个实现。由于是网页,还是带着服务器渲染的 Web Application,自然是得用上传统的 session 了,那 jwt 的存在原因便是笔者上一篇文章分析的那样。

这里我们再着重分析下为什么使用 session。由于为了保证用户首次加载网页时能够尽快地看到自己需要的内容,所以我们应该避免先加载游客页面再通过浏览器上的保存的 token 获取该用户独有的内容。这样一来,剩下的就是经典的 cookie了,每次请求都带着的 cookie里,带上 session 确实是个不错的选择。当然你也可以在 cookie 里带上加密、签名的用户信息。只要能充当登录状态的凭据就行。

每次刷新页面,nuxt.js 都会调用一个叫做 nuxtServerInit 的函数,根据 nuxt.js 的文档可以知道,这个函数是带有请求和响应对象的。所以我们很容易地可以在这个函数中里获取到带有用户信息的 cookie。之后,只需要再将这 cookie 原封不动地转发给后端接口进行鉴权就行了。后端接口响应后,便可获取到用户信息了。

代码如下:

async nuxtServerInit ({store, state, commit}, {req, res, redirect, app}) {
      try {
          const {data: {name, id, group, accessToken}, headers} = await app.axios.post(
              '../auth/refreshed-token',
              null,
              {
                  headers: {'Cookie': req.headers['cookie'] || null}
              })
          this.accessToken = accessToken // jwt (示意代码,可以使用 vuex 保存)
          this.user = new User({name, id, group}) // 用户信息 (示意代码,可以使用 vuex 保存)
          headers['set-cookie'].forEach((item) => {
              res.setHeader('set-cookie', item)
          })// 将后端响应的 `cookie` 再返回给浏览器
      } catch (e) {
        if (!e.response) {
          console.error(e)
        }
        if (e.response.status === 401) {// 凭据无法通过验证
          redirect('/authentication')// 跳转到登录页面
        }
      }
    }

nuxtServerInit 这个函数在 store 根模块的 actions 中,接受两个参数,第一个是 Vuex 的 context,第二个是 nuxt.js 的 context。其中 reqres 分别是 node.js 中的 http.IncomingMessagehttp.ServerResponse

代码中的 accessTokenuser 的赋值只是示意,app.axios 通过 Inject in $root & context 实现。

这样就能尽量少改动 nuxt.js 项目,从而实现身份认证。

登录 后发言

评论列表

暂时没有评论,快快抢个沙发吧!

共 0 条