项目经验

关于 token

1、在登录成功时，将 token（通常请求的请求头所需要的值）和其他请求所需要的参数保存在本地缓存当中，sessionStorage.setItem。相当于你在中国，你拿到了中国的身份证，就可以在中国里居住生活。网页也一样，当用户持有 token，就可以在页面生态里跳转不同页面但不需要重复获取用户的信息。

2、用户手动删除了保存在缓存中的 token 和请求所需要的参数，但是刷新页面后，还可以停留当前页面，这样会涉及到隐私安全问题，我们可以在 相应的生命周期中判断缓存中的数据是否还存在，不存在则跳转到登录页面重新登录，登录后重新获取 token 和其他数据，数据到缓存中。

3、有时候有些用户会比较调皮，手动删除了保存在缓存中的 token 和请求所需要的参数，但是之后可能会进行其他需要 token 请求的操作。针对这种情况，我们需要用到路由守卫，判断每次跳转前缓存中是否还存在 token 等数据。不存在则重新登录。注，有些页面不需要 token 也能跳转，所以通常给需要 token 的路由页面（需要 token 的页面大多是隐私页面）绑定属性meta{isToken:true}，代表这个页面需要 token。

4、token 最好用 sessionStorage 保存（关闭页面就清空缓存），而对于一些重大隐私和机密的网页则必须使用 sessionStorage。其他情况也可以用 localStorage（除非手动清空缓存，否则永远存在），但前提是保存到 localStorage 时要存入一个时间戳。设定一个保质期，下次从 localStorage 获取 token，将当前时间戳与之前存入的时间戳作对比，如果过期了则删除缓存中的 token。但是这样做依然存在安全问题，毕竟在保质期内其他人在同一设备打开网页也会拿到你的 token。

Scss

可以通过@import在 Scss 文件中引入 css、scss 文件 对于引入 css 文件，最终还是编译成一样的语句用于引入 css 文件

css、scss文件

@import './normalize.css'

Object.freeze

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

浏览器全屏API

Element.requestFullscreen()

用于发出异步请求使元素进入全屏模式。

document.exitFullscreen()

用于让当前文档退出全屏模式

如果一个元素 A 在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素 A 退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

随机字符串

const CODE = 'qwertyuipasdfghjklxcvbnm13456789'
function randomCode(num = 4) {
	let data = ''
	for (let i = 0; i < num; i++) {
		const random = Math.floor(Math.random() * CODE.length)
		data += CODE[random]
	}
	return data
}

Math.random() 函数返回一个浮点数,区间在[0,1)

Object.setPrototype

Object.setPrototypeOf(obj, prototype) 方法为一个指定的对象设置原型 obj 是指定对象，prototype 是原型(一个对象 或 null)

取消重复请求(并非所有请求都是取消重复请求)

1、在路由占位组件中：取消所有不是当前页面的请求 2、通过 axios 取消某些请求的重复请求

sessionStorage 和 localStorage 对象都具有 length 属性

https://developer.mozilla.org/zh-CN/docs/Web/API/Storage

location.origin

返回 URL 的协议+主机名+端口号 例如'https://baidu.com'

redux-thunk

redux 和 vuex 都会在页面刷新后初始化为原始值，所以一般我们会利用 sessionStorage，localStorage 存储一些必要的共享状态 对于 redux 持久化数据存储，我会用到一个插件：redux-persist，原理也是利用 sessionStorage，localStorage 进行存储

GitHub OAuth 第三方登录

UI库常用组件需二次封装进行复用

由于该后台管理系统大量使用到表格，因此对 antd Table 组件进行二次封装，table 组件仅作为 UI 组件进行展示，逻辑在逻辑组件中编写，通过 props 进行传递到 table 组件。

md5

md5 加密是不可逆过程，md5 不可破解，工具库有：blueimp-md5 MD5 加密原理是散列算法，散列算法也称哈希算法。 计算机专业学的数据结构就有哈希表这一知识点。 比如 10 除以 3 余数为一，4 除以 3 余数也为一，但余数为一的就不知道这个数是哪个了。 所以 md5 不能解密。 就算是设计这个加密算法的人都不知道。 但是你的密码是怎么验证的呢？就是因为同一密码加密后一定相同。 你输入密码加密后才能知道你的密码是否正确。 也就是说，你的密码只有你自己知道。 也是为什么扣扣密码只能重置，不能找回的原因。

Server 酱

「Server 酱」，英文名「ServerChan」，是一款「手机」和「服务器」、「智能设备」之间的通信软件。

即从服务器、路由器等设备上推消息到手机的工具。

开通并使用上它，只需要一分钟：

1.访问 sct.ftqq.com， 微信扫码登入

2.点击「消息通道」，选择「企业微信应用消息」，按页面下方的提示配置企业微信 3.配置完成后，点击「SendKey」页面，就可以找到新的 SendKey 了 4.在你要调用的地方，用新的 SendKey 替换旧版的 sckey；用 sctapi.ftqq.com 替换旧版请求链接中的 sc.ftqq.com ，（没有地方填请求链接的可以暂时不改）。替换后，消息就会推送到企业微信等你指定的新通道上啦。