nuxt.js 服务端请求时带上token实现详解

一、前言

nuxt.js 是服务端渲染的前端框架，但是 localStorage 或者说 window 对象在 created() 才开始允许调用，这就导致我们服务端不能第一时间取到 localStorage 里的内容，导致我们服务端请求获取不到token,只能进行无状态的请求。

解决的方法是使用cookie-universal-nuxt，将token信息保存在cookies 里面。

对于需要强制要求登录的页面

• 对于第一次请求，识别出 cookie 并加载到状态树 vuex ，再由服务端 asyncData() 带上token去拉取信息，若在此步 token 不存在或 token 错误，此时应该 redirect 到登录页面；若 token 过期且有 refresh_token ，应该由服务端再 redirect 带领用户去刷新令牌。
• 对于第二次及以后的请求，是客户端 axios 进行拉取信息，和以前前端操作一致。

对于不需要强制要求登录的页面

• 对于所有请求，识别出 cookie 并加载到状态树 vuex ，服务端 asyncData() 带上token去拉取信息

二、安装和实现细节

1、安装cookie-universal-nuxt

npm install cookie-universal-nuxt -s

2、在nuxt.config.js添加

 modules: [
    'cookie-universal-nuxt'
  ],

3、设置cookie和使用cookie

this.$cookies.set('token', data.token)

async asyncData({ app }) {
    console.log(app.$cookies.get("token"));
},

需要强制登录的实现

在上面步骤的前提下，加上的下面的流程
1）安装js-base64

npm install --save js-base64

2）在nuxt的store文件夹中新建index.js

// 导入Base64
import { Base64 } from 'js-base64'
 
// 设定需要储存的数据及其默认值
export const state = () => ({
  token: {
    Authorization: null,
    username: null,
    userid: null
  }
})
 
// 获取数据方法
export const getters = {
  getToken (state) {
    return state.token
  }
}
 
//更新数据方法
export const mutations = {
  setToken (state, token) {
    state.token = token
  }
}
// 初始化数据方法
export const actions = {
  // nuxtServerInit，用以初始化数据
  async nuxtServerInit ({ commit }, { app }) {
    const token = {}
    // 从cookie中获取token，并且将其中的数据更新到store
    token.Authorization = app.$cookies.get('Authorization')
    // 如果存在token
    if (token.Authorization) {
      // 解析token中携带的用户信息
      const info = JSON.parse(Base64.decode(token.Authorization.split('.')[1]))
      token.username = info.username
      token.userid = info.id
      // 将用户信息更新
       // commit用以提交需要更新的数据，并指定更新的方法
      commit('setToken', token)
    }
  }
}

对于vuex来说，有三个部分是必须的，一个是状态数据，即state ，这个部分用户确定需要的数据，一个是getters，通过getters可以获取状态数据，一个是mutations，这里是更新数据的方法。对于访问网站第一时间就需要用到的数据可以用nuxtServerInit来初始化，用户访问时会在页面渲染之前执行该方法以获取需要的数据。store中的数据需要手动进行更新。在登陆成功之后，也需要将token数据更新到store。
3）设置cookie和获取cookie

this.$cookies.set('token', 123456)
this.$cookies.get("token")

4）在middleware下新建auth.js

/*权限判断，如果store中存在token则认为已经登陆，予以放行
如果用户未登陆则跳转到登陆页面*/
export default function ({ store, redirect }) {
  if (!store.state.token.Authorization) {
    return redirect('/login')
  }
}

5）在需要强制登录的页面引入

<script>
export default {
  name: 'articlePost',
  //使用middleware引入中间件
  middleware: 'auth'
}
</script>