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

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') } }) }