Vue SSR, 在服务端请求数据时怎么带 cookies?

constcookieparser=require('cookie-parser')并且在路由前面use

app.use(cookieparser())部份代码

constfs=require('fs')constpath=require('path')constlru=require('lru-cache')constexpress=require('express')constfavicon=require('serve-favicon')constcompression=require('compression')constmicrocache=require('route-cache')constresolve=file=>path.resolve(__dirname,file)const{createbundlerenderer}=require('vue-server-renderer')constisprod=process.env.node_env==='production'constusemicrocache=process.env.micro_cache!=='false'constserverinfo=`express/${require('express/package.json').version}`+`vue-server-renderer/${require('vue-server-renderer/package.json').version}`constapp=express()//cookieconstcookieparser=require('cookie-parser')//并且在路由前面useapp.use(cookieparser())将cookies注入render的上下文中

app.get('*',(req,res)=>{//其他代码省略constcontext={url:req.url,cookies:req.cookies}constrenderstream=renderer.rendertostream(context)//其他代码省略})vue2.0的则改成这样

functionrender(req,res){consts=date.now()res.setheader("content-type","text/html")//res.setheader("server",serverinfo)//改headerres.setheader("server",'zibuzhai.com')res.setheader("x-powered-by",'zibuzhai.com')consthandleerror=err=>{if(err.url){res.redirect(err.url)}elseif(err.code===404){res.status(404).send('404|pagenotfound')}else{//rendererrorpageorredirectres.status(500).send('500|internalservererror')console.error(`errorduringrender:${req.url}`)console.error(err.stack)}}constcontext={title:'titlehn2.0',//defaulttitlekeywords:'keywordshn2.0',//defaultkeywordsdescription:'descriptionhn2.0',//defaultdescriptionurl:req.url,cookies:req.cookies}renderer.rendertostring(context,(err,html)=>{if(err){returnhandleerror(err)}res.send(html)if(!isprod){console.log(`wholerequest:${date.now()-s}ms`)}})}app.get('*',isprod?render:(req,res)=>{readypromise.then(()=>render(req,res))})将cookies注入vuex的store中在server-entry.js文件中,将cookies注入到store中

exportdefaultcontext=>{//其他代码省略if(context.cookies){store.state.cookies=context.cookies}//其他代码省略}vue2.0后代码

exportdefaultcontext=>{returnnewpromise((resolve,reject)=>{consts=isdev&&date.now()const{app,router,store}=createapp()if(context.cookies){store.state.cookies=context.cookies}const{url}=contextconst{fullpath}=router.resolve(url).routeif(fullpath!==url){returnreject({url:fullpath})}//setrouter'slocationrouter.push(url)//waituntilrouterhasresolvedpossibleasynchooksrouter.onready(()=>{constmatchedcomponents=router.getmatchedcomponents()//nomatchedroutesif(!matchedcomponents.length){returnreject({code:404})}//callfetchdatahooksoncomponentsmatchedbytheroute.//aprefetchhookdispatchesastoreactionandreturnsapromise,//whichisresolvedwhentheactioniscompleteandstorestatehasbeen//updated.promise.all(matchedcomponents.map(({asyncdata})=>asyncdata&&asyncdata({store,route:router.currentroute,cookies:context.cookies}))).then(()=>{isdev&&console.log(`datapre-fetch:${date.now()-s}ms`)//afterallprefetchhooksareresolved,ourstoreisnow//filledwiththestateneededtorendertheapp.//exposethestateontherendercontext,andlettherequesthandler//inlinethestateinthehtmlresponse.thisallowstheclient-side//storetopick-uptheserver-sidestatewithouthavingtoduplicate//theinitialdatafetchingontheclient.context.state=store.stateresolve(app)}).catch(reject)},reject)})}这样就可以在组件中取到cookies了.封装请求

importvuefrom'vue'importaxiosfrom'axios'importvueaxiosfrom'vue-axios'importsettingsfrom'../config'//importstorefrom'../store/index'//importrouterfrom'../router/index'importcreaterouterfrom'../router/index'importcreatestorefrom'../store/index'importcookiesfrom'js-cookie';vue.use(vueaxios,axios)constrouter=createrouter()//conststore=createstore()//动态设置本地和线上接口域名vue.axios.defaults.baseurl=settings.host//初始化varconfigdefault=vue.axios.defaults.headersconstparsecookie=cookies=>{letcookie=''if(cookies){object.keys(cookies).foreach(item=>{cookie+=item+'='+cookies[item]+';'})}returncookie}exportconstrequest=({type='post',url,data={},config={},globalloading=false}={},cookies)=>{letrequestcookies=''if(json.stringify(cookies)&&json.stringify(cookies)!="{}"){object.keys(cookies).foreach(item=>{requestcookies+=item+'='+cookies[item]+';'})}if(requestcookies){letcookie=requestcookiesconfigdefault={headers:{'x-requested-with':'xmlhttprequest',cookie}}//config=configdefault}config=configdefaultletdatas=type==='get'?{params:data}:datareturnvue.axios[type](url,datas,config).catch(response=>{/*eslint-disableprefer-promise-reject-errors*/returnpromise.reject({code:500,message:'服务器繁忙!'})}).then((response)=>{//统一loading//store.commit('showajaxloading',false)let{data}=responseif(typeofdata==='string'){//转换返回jsondata=json.parse(data)}console.log(data)if(data&&data.code==200){//promise.reject(data)//为什么不是router.query??varredirect=router.currentroute.query.redirectif(redirect){console.log(redirect)//用location不会报promise错，用router的跳转会报错location.href=redirectpromise.reject(data)}//请求成功returndata}if(data.code===400){//统一报错弹窗//store.commit('showajaxmessage',true)returndata}if(data&&data.code===401){//没有登录权限//router.replace({//name:'not',//query:{redirect:router.currentroute.path}//})//returndata;//location.href='/#login'//router.push('login?redirect='+router.currentroute.path)//router.push({path:'login',query:{redirect:router.currentroute.path}})//用location不会报promise错，用router的跳转会报错//location.href='/login?redirect='+router.currentroute.path//promise.reject(data)//console.log(router.currentroute)returndata.data}else{returndata;}returnpromise.reject(data)}).catch(err=>{returnpromise.reject(err)})}发起带cookies参数的请求