Nuxt：鉴权方式

1.jwt鉴权

在线演示链接

2.session鉴权

在线演示链接

3.nuxtServerInit

这个是一个非常重要的方法

nuxtServerInit 方法

如果在状态树中指定了 nuxtServerInit 方法，Nuxt.js 调用它的时候会将页面的上下文对象作为第 2 个参数传给它（服务端调用时才会酱紫哟）。当我们想将服务端的一些数据传到客户端时，这个方法是灰常好用的。

举个例子，假设我们服务端的会话状态树里可以通过 req.session.user 来访问当前登录的用户。将该登录用户信息传给客户端的状态树，我们只需更新 store/index.js 如下：

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}

如果你使用状态树模块化的模式，只有主模块（即 store/index.js）适用设置该方法（其他模块设置了也不会被调用）。

这时context被赋予nuxtServerInit作为第二个参数，它与asyncData或fetch方法相同。

nuxtServerInit 方法接收的上下文对象和 fetch 的一样，但不包括 context.redirect() 和 context.error()。

注意：异步nuxtServerInit操作必须返回 Promise 来通知nuxt服务器等待它们。

actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}

这是官网上的介绍，搞懂这个方法之后，再进行改进。

实现：

const cookieparser = process.server ? require('cookieparser') : undefined

export const actions = {
  nuxtServerInit ({ commit }, { req }) {
    let token = null
    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)
      try {
        token = parsed.token
      } catch (err) {
        // 找不到有效的Cookie
      }
    }
    commit('token/setToken', token)
  }
}

注意：