
react 服务端渲染 cookie 有2个问题：

1. [服务端执行的代码如何拿到cookie并解析透穿给后端接口，后端又如何设置cookie？](#服务端cookie透传)
2. [浏览器执行的代码如何读取cookie？](#客户端读取cookie)



# 服务端cookie透传

明白next的渲染流程很重要：

浏览器打开页面 -> node服务请求后端接口 -> node服务渲染页面 并响应



node服务透传cookie给后端接口：此时cookie只能从request中取的cookie:  [nextjs文档](https://nextjs.org/docs/api-reference/data-fetching/getInitialProps)

```react
Article.getInitialProps = async ({ req, query }) => {
    // 文章详情
    const { article, statusCode, errMessage } = await GET({
        url: `/api/article/${id}`,
        headers: {
            Cookie: req.headers.cookie
        }
    }).then(resp => {
        return {article: resp.data, statusCode: resp.code, errMessage: resp.message}
    })
    return { article: article, statusCode: statusCode, errMessage: errMessage }
}
```



后端设置cookie：

- 如果是node服务请求的后端接口，此时的node服务就相当于nginx一样的代理请求，需要将响应的cookie透传给浏览器

```react
import React from "react";
import {GET} from '../src/request';

function Demo ({data}) {
    return (
        <div>
            {data}
        </div>
    )
}

Demo.getInitialProps = async ({ req, query, res }) => {
    let cookie;
    const {data, code, message} = await GET({url: "http://douyacun.io/api/helper/demo", noCheck: true}).
    then((resp) => {
        res.setHeader("set-cookie", resp.headers["set-cookie"]);
        return resp.data
    }).
    then((data) => {
        return data
    })
    return {data: data}
}

export default Demo
```

GET 是封装的 axios，axios 的response不是node原生的 [response](https://github.com/axios/axios#response-schema)，而nextjs的res是node原生的[response](https://nodejs.org/api/http.html#http_class_http_serverresponse)，这里需要注意一下使用的请求库

**重点是：明白node服务渲染，其实是一层代理服务**

- 如果是浏览器客户端请求的后端接口，response是可以直接被浏览器读取到的，就不需要我们做什么事情了。



# 客户端读取cookie

客户端请求接口会有2个cookie问题：

1. 跨域请求携带cookie
2. 如何读取并解析cookie

### 跨域请求携带cookie

原理是一致的，先header请求服务端，验证服务端是否支持跨域，以及支持的域名：

```http
Access-Control-Allow-Origin: https://www.douyacun.com
```

> 这里一定要明确指定域名，否则请求还是无法携带cookie的

axios 需要指定：

```http
withCredentials: true
```



### 浏览器读取并解析cookie

用户信息存cookie的原因是不安全，也不建议的。当然前提用户信息存在隐私数据，解决方案是存在session中，cookie只是存session id。

我的博客cookie只存 昵称和ID。如何确保cookie不被篡改呢？cookie，对数据进行签名，签名使用的key是存储在服务端里。如果有更高的安全需求的，请移步～

重点：**react服务端渲染，cookie是存在浏览器上的，确保代码是在浏览器客户端上执行的才能读取到对吧**

```react
import React from 'react';
import { parseCookies } from 'nookies'

function Demo() {
    const [user, setUser] = React.useState({})
    // 首次加载
    React.useEffect(() => {
        const all = parseCookies();
        if (all.douyacun) {
            setUser(JSON.parse(all.douyacun));
        }
    }, [])
  return (<div>Hello {user.name}.</div>)
}

export default demo
```

[React.useEffect的用法](https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect), 需要注意的是:

> 默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 [在只有某些值改变的时候](https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect) 才执行。
>
> 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（`[]`）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行，解析cookie只需要一次就够了～



nextjs getInitialProps 是在服务端执行的代码，可以通过 request.header 获取到 cookie 透传给后端接口

react服务端渲染: cookie如何透传给后端，后端如何设置cookie


[TOC]

# 左右布局

定义父框`root`  左视图 `left`，点击移动区 `resizer`，右试图 `right`，建议使用flex布局

![image-20201228233232732](/images/blog/1/react/assert/image-20201228233232732.png)

```css
root: {
  	height: "100%",
  	width: "100%",
}
left: {
    width: "70%"
},
resizer: {
  	userSelect: "none",
    display: "flex",
    backgroundColor: "#fafbfd",
    width: 14,
    cursor: "ew-resize",
    alignItems: "center",
    justifyContent: "center",
    border: "0.5px solid rgba(0, 0, 0, 0.07)",
},
right: {
  	width: "30%",
}
```

```html
<div className={classes.root} onMouseMove={mouseMoveHandler}>
  <div className={classes.left} style={{ width: leftWidth + "%", userSelect: userSelect }} ref={leftRef}>
		左
  </div>
  <div className={classes.resizer} onMouseDown={mousedownHandler}>︙</div>
  <div className={classes.right} style={{ width: rightWidth + "%" }}>
		右
  </div>
</div>
```

`resizer` 鼠标悬浮时一定是这个样式  <--> 的

如何实现左右移动呢？

1. 只有在`resizer` 区域内鼠标左键按下时，才可以左右移动
2. 鼠标左键抬起时，结束左右移动
3. 左视图宽度，鼠标移动时： [left.width = e.clientX / screen.width * 100] 鼠标x轴 -> 浏览器左边 的距离/窗口的宽度  * 100% 就是 `left` 的百分比
4. 右视图宽度，[right.width = 100 - left.width - resizer.width/screen.width] 窗口宽度 - 左视图宽度 - 移动区宽度 = 右视图宽度



### resizer 订阅 `mouseDown`

在resizer按下鼠标时，才可以左右移动，加锁:

```react
const [canMove, setCanMove] = React.useState(false) // 聊天框：是否移动
```

 `mouseDown`时，容易选中左右的文字体验感很差, 避免鼠标按下时选中文字，加锁：

```react
const [userSelect, setUserSelect] = React.useState("text")
```

处理函数:

```react
// 聊天框：开启移动
const mousedownHandler = (e) => {
  setCanMove(true)
  setUserSelect("none");
}
```

### document 订阅 `mouseup`

只能在document上订阅，不能确定最后鼠标的位置是在哪个元素上

```react
// 订阅聊天框宽度
React.useEffect(() => {
  document.addEventListener("mouseup", mouseUpHandler);
  return () => {
    document.removeEventListener("mouseup", mouseUpHandler);
  }
}, [])
```

首先`React.useEffect`,第二个参数空代表，不管state如何变化，此函数只会加载一次，类似init state。返回闭包组件卸载时执行移除document.onMouseUp的订阅

鼠标抬起后本次调整结束，持久化当前边框位置，下次再进来就不需要重新调整了:

```react
// 聊天框：结束移动
const mouseUpHandler = () => {
  setCanMove(false)
  setUserSelect("text");
  // 持久化聊天宽度
  localStorage.setItem(DiscussLeftWidth, leftWidth);
  localStorage.setItem(DiscussRightWidth, rightWidth);
}
```

### root 订阅 `mousemove`

首先获取窗口的宽度:

```react
const [screenWidth, setScreenWidth] = React.useState(100); // 聊天框：当前窗口宽度，计算左右比例

React.useEffect(() => {
 	 setScreenWidth(document.body.clientWidth);
}, [])
```

鼠标在`root` 元素内移动时，计算左右边框的百分比，为了避免鼠标移动重载次数过多导致的卡顿，加锁：

```react
const [lockResize, setLockResize] = React.useState(false); // 聊天框：加载锁，不要设置太快了
```

root 订阅鼠标移动

```react
const mouseMoveHandler = (e) => {
  if (canMove) {
    let lw = (e.clientX / screenWidth * 100).toFixed(3)
    let rw = (100 - lw - 1).toFixed(3);
    if (!lockResize && lw > 50 && (screenWidth - e.clientX) > 300) {
      setLeftWidth(lw)
      setRightWidth(rw)
      setLockResize(true)
      // 10毫秒以后释放该锁
      setTimeout(() => { setLockResize(false) }, 10)
    }
  }
}
```

# 滚动条样式

默认的滚动条样式时很粗的，中间加了 `resizer`以后就太丑了，滚动条必须瘦下来才行：

```css
left: {
  overflowY: "scroll",
  padding: 10,
  "&::-webkit-scrollbar": {
    width: 4,
  	// height: 16 只能设置宽度，长度浏览器会自动根据div长度调整
  },
  "&::-webkit-scrollbar-thumb": {
    backgroundColor: "rgba(105, 112, 125, 0.5)" // 滚动条背景色
  }
},
```

- `::-webkit-scrollbar` — 整个滚动条.
- `::-webkit-scrollbar-button` — 滚动条上的按钮 (上下箭头).
- `::-webkit-scrollbar-thumb` — 滚动条上的滚动滑块.
- `::-webkit-scrollbar-track` — 滚动条轨道.
- `::-webkit-scrollbar-track-piece` — 滚动条没有滑块的轨道部分.
- `::-webkit-scrollbar-corner` — 当同时有垂直滚动条和水平滚动条时交汇的部分.
- `::-webkit-resizer` — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

![image-20201229003702633](/images/blog/1/react/assert/image-20201229003702633.png)























































































