项目立项于 2019 年 10 月 17 日
GitHub 仓库地址
第一章节
一、Redis 鉴权，持久化 Session 存储的环境准备
操作系统：Mac os
全局安装Redis,MongoDB
安装成功后，命令行输入
redis-server
启动 Redis 服务 Redis默认占用端口6379
MongoDB默认端口是27017
安装 Node.js 的RestFul服务需要的依赖
connect-redis // 连接 redis
cookie-parser //cookie 解析
express //Node.js 框架
express-session //express 的 session 存储库
redis //redis
等依赖
二、服务端代码编写
鉴权的思路：
密码密文传输，存储
利用 Redis 进行持久化存储Session
需要写入数据库的内容可以集中式写入
没有储存 session 信息的，不能访问任何接口
使用 pm2 启动 Node.js 服务，保证服务端的健壮性
每次前端会发送请求是否免密码登陆，前往 Redis 拉取数据鉴定
例如免登陆鉴权的路由：
app.get('/authentication', (req, res) => {
const result = req.session;
if (result) {result.login && res.send(JSON.stringify({ code: 0, data: '免登陆'}));
return;
}
res.send(JSON.stringify({ code: 1, data: '需要密码登陆'}));
return;
});
完成一个需求，先把整体架构图看明白，再把流程图画出来，就成功了一半
上面的路由比较简单，如果这个人登陆过，持久化存储在服务端 Session 信息中的 login 为true, 那么就不需要密码登陆，前端给予控制路由即可。
登陆路由的思路：
每次登陆，如果没有的 username 自动注册
前端做账户密码的格式化检测
后端只负责检测密码是否正确、是否首次登陆等（考虑到高并发）
账户密码可以用 key-value 形式存储在 Redis 中（密码都是密文）
伪代码如下：
redisClient.get(username, (err, value) => {if (value && password !== value) {res.send(JSON.stringify({ code: 2, data: '密码错误'}));
return;
}
if (!req.session['login' && !value]) {redisClient.set(username, password);
req.session['login'] = {username, login: true, password};
res.send(JSON.stringify({ code: 0, data: '登陆成功'}));
return;
}
res.send(JSON.stringify({ code: 0, data: '欢迎回来'}));
三、服务部署
由于我们项目需要用到 session 持久化存储，但是 session 其实本质利用了 Cookie 传输，而且存在跨域 所以需要在 axio、Node.js 服务端配置允许 Cookie 跨域
Axios
axios.defaults.withCredentials = true;
服务端伪代码：
app.all('*', function(req, res, next) {res.header('Access-Control-Allow-Origin', 'http://localhost:5000');
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
res.header('X-Powered-By', '3.2.1');
res.header('Content-Type', 'application/json;charset=utf-8');
res.header('Access-Control-Allow-Credentials', 'true');
next();});
上面项目的代码已经编写大致完毕，下面需要部署到阿里云服务器
首先购买一台轻量级服务器，选择 Node.js 环境
将 Node.js 代码通过苹果电脑自带的 ftp 传输到阿里云
输入密码鉴权后,
首先输入 put
然后拖入你的文件到命令行中，然后设置在阿里云服务器中的文件路径，回车。即可正常上传
之后在 Mac 自带的 ssh 命令行工具远程连接，启动 Node.js 服务
修改 Nginx 配置，反向代理 80 端口 —>Node.js的服务监听窗口
重启 Nginx 即可访问
至此，外网已经正常访问，接口调用正常
四、前端免密登陆、路由鉴权
根组件第一次被渲染时候发送 ajax 请求
const result = await authentication();
if (result.code === 0) {alert('免登陆');
this.props.history.replace('/video');
}
如果有返回状态码 0，即可免登陆
五、前端用户名，密码格式化校验
客户端是一个人用，后端是一个接口很多人用
上面这句话时刻记着，如果校验不通过，那么就不应该有发送请求或做出某种损耗传输、耗时操作的能力
当然，我们项目不使用任何 UI 组件库，纯原生开发，包括后面的通信也是使用一样，使用 TCP 长连接传输
六、更新一次技术架构流程图
目前 RestFul 风格的服务端接口，已经部署。后面是长连接、静态资源服务器的代码部署到另外一台服务器上，然后通过 GRPC+PB 协议调用～
欢迎加入我们的微信群，关注我们的微信公众号：前端巅峰
也欢迎在下方给我们赞助，开源不易，欢迎 Star 支持