nuxt 使用 ssr 服务端渲染基于 cookie 的登录校验 vue+nuxt+cookie-universal-nuxt+axios

[hey9162]

Install

• yarn: yarn add cookie-universal-nuxt
• npm: npm i --save cookie-universal-nuxt

Add cookie-universal-nuxt to nuxt.config.js:

{
  modules: [
    // Simple usage
    'cookie-universal-nuxt',
    '@nuxtjs/axios',

    // With options
    ['cookie-universal-nuxt', { alias: 'cookiz' }],
 ],
 plugins: [
    '@/plugins/axios'
  ],
}

{
  modules: [
    ['cookie-universal-nuxt', { parseJSON: false }],
 ]
}

---

// server
app.$cookies.get('cookie-name', { parseJSON: false })

// client
this.$cookies.get('cookie-name', { parseJSON: false })

const cookieValObject = { param1: 'value1', param2: 'value2' }

// server
app.$cookies.set('cookie-name', 'cookie-value', {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
})
app.$cookies.set('cookie-name', cookieValObject, {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
})

// client
this.$cookies.set('cookie-name', 'cookie-value', {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
})
this.$cookies.set('cookie-name', cookieValObject, {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
})

const options = {
  path: '/',
  maxAge: 60 * 60 * 24 * 7
}
const cookieList = [
  { name: 'cookie-name1', value: 'value1', opts: options },
  { name: 'cookie-name2', value: 'value2', opts: options },
  { name: 'cookie-name3', value: 'value3', opts: options },
  { name: 'cookie-name4', value: 'value4', opts: options }
]

// server
app.$cookies.setAll(cookieList)

// client
this.$cookies.setAll(cookieList)

// server
const cookieRes = app.$cookies.get('cookie-name')
const cookieRes = app.$cookies.get('cookie-name', { fromRes: true }) // get from res instead of req
// returns the cookie value or undefined

// client
const cookieRes = this.$cookies.get('cookie-name')
// returns the cookie value or undefined

---

// server
const cookiesRes = app.$cookies.getAll()
const cookiesRes = app.$cookies.getAll({ fromRes: true }) // get from res instead of req
// returns all cookies or {}
{
  "cookie-1": "value1",
  "cookie-2": "value2",
}

// client
const cookiesRes = this.$cookies.getAll()
// returns all cookies or {}
{
  "cookie-1": "value1",
  "cookie-2": "value2",
}

// server
app.$cookies.remove('cookie-name')
app.$cookies.remove('cookie-name', {
  // this will allow you to remove a cookie
  // from a different path
  path: '/my-path'
})

// client
this.$cookies.remove('cookie-name')

---

// note that removeAll does not currently allow you
// to remove cookies that have a
// path different from '/'

// server
app.$cookies.removeAll()

// client
this.$cookies.removeAll()

---

// server
const cookieRes = app.$cookies.nodeCookie.parse('cookie-name', 'cookie-value')
cookieRes['cookie-name'] // returns 'cookie-value'

// client
const cookieRes = this.$cookies.nodeCookie.parse('cookie-name', 'cookie-value')
cookieRes['cookie-name'] // returns 'cookie-value'

export default function ({ $axios, redirect, app }) {
  $axios.onRequest(config => {
    const cookieRes = app.$cookies.get('cookie-name')
    if(cookieRes){
      config.headers.Authorization = 'cookieRes'
    }
    console.log('Making request to ' + config.url)
    return config
  })
  $axios.onResponse(response => {
    /**
     * 拦截未登录状态请求页面 url
     */
     let currentUrl = ''
    if (process.client) {
      currentUrl = window.location.href
    }else{
      currentUrl = response.config.headers.referer
    }
    if(response.code === '401'){
      /**
       * 如果需要登陆的接口跳转到登录页面 currentUrl 为登录成功后跳回原请求的页面
       */
       window.location.href = '你的登录页面的 url+?' currentUrl
	}
  })
  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}