观影记录网站的一份踩坑总结ing
技术栈
前端：Vue全家桶
服务端：Express框架 + MongoDB
关于技术选型的反思
前后端分离：前端与后端API可以同域/跨域，方便分工
SPA：
vue：修改子组件样式
style scoped：为了防止命名带来的样式污染，赋予该组件内元素唯一标识。父子组件任一使用了scoped都无法更改子组件样式。
解决：混合style
登录登出与权限控制
方案
- cookie + session 服务端存储压力、集群同步、cookie安全性
- token + 客户端保存（localstorage） 一旦下发无法控制、收回
- SSO单点登录：多个应用系统共享登录状态（eg.百度系） 父域cookie、认证中心服务器、localstorage跨域
- OAuth：第三方
权限控制
- 路由级：路由守卫beforeEach+路由元数据meta（拦截/setting、/createlist等）
- 接口级：axios与express的拦截器（拦截mark操作请求等） 请求头携带token → 服务端校验token，失败返回错误码/成功返回数据 → axios响应拦截错误码，跳转到登录页
- 内容/按钮级：自定义指令v-permission（拦截评论modal）
登录登出流程
- 主动登录：前端发送请求 → 服务端验证并生成token → 前端保存token到本地+vuex → 跳回上页 → （获取用户信息）→ 头部更新
- 主动登出：前端发送请求（头携带token）→ 服务端销毁token → 前端清空本地+vuex的全部信息 → 原地头部更新
- 被动登出（localstorage被删除等）：当路由跳转，检查本地token → 前端清空本地+vuex的全部信息 → 原地头部更新
获取用户信息
- 每次跳转路由，localstorage有token？ 有：(获取用户信息，是否去登录页？拦截：放行)
无：(清空全部，路由需要权限？跳转到登录页：放行)
1.前端拦截无效
原因：封装axios实例为service，但并没有以service引入
状态码2xx以外的响应会被拦截，error.response.status取出（此处的状态码不是在响应体中自定义的状态）
2.服务端拦截无效
原因：express拦截器使用app.use()定义，代码顺序执行，位置应当放在中间件/静态资源之后，路由定义之前
3.服务端响应状态码
res.status：只设置状态码，不返回信息 → res.sendStatus = res.status(xxx).send('yyy')
4.router-view与视图更新（登录按钮&用户信息的切换）
为了少写几个header、footer，中间内容用了router-view展示……但路由跳转只有中间视图更新，头部需要自行刷新，以实现登录按钮&用户信息的切换（v-if="token"）
思路：监听localstorage，变化则更新头部视图
方案：
- vuex响应式，state.xxx
注意：vue2.0响应式底层问题，对象/数组类型无法及时更新
持久化：每次刷新，从local取token/后台取信息
state.userinfo.username → state.username
5.刷新页面
- $nextTick、v-if、provide/inject
<NavHeader v-if="isRouterAlive" />
<div class="middle">
<router-view />
</div>
provide() {
return {
reload: this.reload,
};
},
data() {
return {
isRouterAlive: true
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true;
});
},
},
补充
验证码
手机登录
鼠标事件：移入移出
mousemove：元素内多次移动重复触发
mouseenter - mouseleave：只触发一次，不会冒泡，性能问题
mouseover - mouseout：包含子元素，会冒泡
一些debug总结
- console.log没有=没调用
- 模块封装名与引入时是否一致（axios）
- 代码定义顺序（express拦截器）
