- 保证实现登录的唯一性
靠后端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来完成的可以参考我的另外一篇文章