前言
前段时间搭完 React 同构框架后，自以为很完美，还自我陶醉了好几天。结果，在接公司单点登录系统的时候立马现了原形。
公司的单点登录是用 cookie 实现的，传统的 spa 系统 cookie 由浏览器自动携带，不存在任何问题。
而 ssr ，是在服务器请求的接口，默认情况肯定带不了浏览器的 cookie，然而一些登录后的页面数据又必须要 cookie，这可怎么办？
思路
将 cookies 作为参数注入到组件的 loadData 方法，然后用传参数的方法把 cookies 传给 api。
1. cookie-parser 中间件解析 cookies
在项目启动文件中（server/index.js）引入 cookie-parser 中间件解析 cookies
const cookieParser = require('cookie-parser');
// 解析 cookie
app.use(cookieParser());
2. 将 cookies 作为参数传给 loadData 方法
let matchs = matchRoutes(router, request.path);
promises = matchs.map(({ route, match }) => {
const loadData = route.loadData;
// 携带上cookie，合并到 params 中，axios 中处理
return loadData ? loadData(store, Object.assign(match.params, request.query, { cookies: request.cookies })) : Promise.resolve(null);
});
3. loadData 传给异步 action
loadData(store, params) {
return store.dispatch(fetchTopList(params));
}
4. 发起请求
在异步 action 处理函数中带着 cookies 发起异步请求
export function fetchTopList(data) {
return (dispatch) => {
return getTopList(data).then(result => {
dispatch(setTopList(result.topList));
});
};
}
5. axios 封装
在 axios 中解析出 params 携带的 cookies，并加到 axios 的 headers 里
const parseCookie = cookies => {
let cookie = '';
Object.keys(cookies).forEach(item => {
cookie+= item + '=' + cookies[item] + '; ';
});
return cookie;
};
request(method) {
return function (url, data = {}, opts = {}) {
// 处理 cookie
let cookies;
if (data.cookies) {
cookies = data.cookies;
delete data.cookies;
opts = Object.assign(opts, {
headers: {
Cookie: parseCookie(cookies)
}
});
}
return axiosCache[method](url, {
...opts,
params: data
});
};
}
结尾
至此，就完成了服务端请求携带 cookie 的问题，但总觉得实现上有点麻烦，不知道是否有更好的办法？
希望大神能不吝指教...
