- 保证实现登录的唯一性
靠后端session来控制，将登录者的id存在session会话中，比如session['user']，即在登录的时候后台设置session['user']=$loginUser($loginUser是从前端拿到的登录账号名变量，这里以php为例)，这样就在该用户访问期间一直对着这个用户，如果换成另一个用户，session['user']会变成另一个用户的id，所以第一个用户的session会话就会被中断，这样可以保证一个浏览器只能同时登录一个用户。
这里需要理解的就是session是服务器为了区分当前客户端而为其分配的不同的“身份标志”，然后客户端每次向服务器发送请求的时候，都带上这个身份标志服务器就知道是谁发的了 - 关于验证
尽量告诉用户哪里出了问题，并提前预知用户会做那些事情，从而进一步优化体验
- 用户名为空或格式不对--提示错误，清空密码框，聚焦到用户名
- 用户名不存在--同上
- 密码错误 -- 提示错误，清空密码框，聚焦密码框
- 状态提示
什么是状态提示？有时候因为网络原因，点击提交 button 之后，ajax 传输半天没有响应，用户等了半天页面一点提示都没有，这个肯定会让用户焦急的。回头看看 Gmail，一个把 ajax 发挥到极致的 web应用，在用户体验上做的也是相当给力的，登录邮箱的时候一个 loading 动画，旁边还放了一个加载基本HTML（供慢速网络使用），每一个操作都有提示，提示中还有一个撤销操作的按钮，数据进行加载的时候，如果加载时间过长，期间会进行多次不同的提示，并在最后给出一个确切的结果，对于一个登录框而言，需要做到这些：
- 一个明确的用于状态提示的 box
- 等待 3s，结果没有出来，提示用户继续等待
- 等待 6s，结果没有出来，提示用户网络不畅通
- 设置 10s 为超时，并告知用户提交表单失败
这些东西的实现并没有太多的技术难度，但是可以给慢速网络下的用户带来很好的体验和安全感。
- 关于密码传输混淆
关于密码前端的加密，采用https才是解决问题最好的方法！虽然前端并不能真正阻挡那些想要攻击网站的hacker，但是可以提高其攻击的成本。
详细的探讨可以参考链接
参考前端常用加密方法
参考MD5加密使用方法
参考MD5加密原理
最最基本的就是做一个混淆了：可以前后端共同定义一个对照库，加上时间戳，传送给后端，后端根据约定的库和时间戳来处理。
同时提示 服务端也不要命文存储密码
- cookie
cookie是客户端保存用户信息的一种机制，用来记录客户信息
cookie中httponly：从安全的角度后端在setCookie的时候可以将其httponly属性设置为true，此时cookie将无法通过脚本获取、编辑，提高系统安全性。
cookie 也可以用于存储用户登录状态 存放session id （session是保存在服务端的一个数据结构，用来跟踪用户状态）
cookie 可以帮助实现记住密码功能，当用户访问网站的时候，网站的页面脚本可以读取这个信息，自动帮你把用户名等信息填充。
提示：对于系统安全要求比较高的系统，不建议做记住密码功能，无论密码以何种形式保存，都是不安全的。 - 关于用户登录后的的返回键
登陆之后，跳转到另外一个页面，但是浏览器本身有前进和后退的功能，有时点击后退回导致页面返回到之前的登录页面，但事实是用户已经登录了，所有页面的状态都应该是已登录的，不管什么情况下都不应该让用户在看到这个页面。
此时不建议采用window.location.href，这样浏览器还是会记录这个登录历史，应该使用 window.location.replace，替换当前历史记录。
如果你是用React-router来完成的可以参考我的另外一篇文章
网友评论