前端用户登录系统小结

  1. 保证实现登录的唯一性
    靠后端session来控制,将登录者的id存在session会话中,比如session['user'],即在登录的时候后台设置session['user']=$loginUser($loginUser是从前端拿到的登录账号名变量,这里以php为例),这样就在该用户访问期间一直对着这个用户,如果换成另一个用户,session['user']会变成另一个用户的id,所以第一个用户的session会话就会被中断,这样可以保证一个浏览器只能同时登录一个用户。
    这里需要理解的就是session是服务器为了区分当前客户端而为其分配的不同的“身份标志”,然后客户端每次向服务器发送请求的时候,都带上这个身份标志服务器就知道是谁发的了
  2. 关于验证
    尽量告诉用户哪里出了问题,并提前预知用户会做那些事情,从而进一步优化体验
  • 用户名为空或格式不对--提示错误,清空密码框,聚焦到用户名
  • 用户名不存在--同上
  • 密码错误 -- 提示错误,清空密码框,聚焦密码框
  1. 状态提示
    什么是状态提示?有时候因为网络原因,点击提交 button 之后,ajax 传输半天没有响应,用户等了半天页面一点提示都没有,这个肯定会让用户焦急的。回头看看 Gmail,一个把 ajax 发挥到极致的 web应用,在用户体验上做的也是相当给力的,登录邮箱的时候一个 loading 动画,旁边还放了一个加载基本HTML(供慢速网络使用),每一个操作都有提示,提示中还有一个撤销操作的按钮,数据进行加载的时候,如果加载时间过长,期间会进行多次不同的提示,并在最后给出一个确切的结果,对于一个登录框而言,需要做到这些:
  • 一个明确的用于状态提示的 box
  • 等待 3s,结果没有出来,提示用户继续等待
  • 等待 6s,结果没有出来,提示用户网络不畅通
  • 设置 10s 为超时,并告知用户提交表单失败
    这些东西的实现并没有太多的技术难度,但是可以给慢速网络下的用户带来很好的体验和安全感。
  1. 关于密码传输混淆
    关于密码前端的加密,采用https才是解决问题最好的方法!虽然前端并不能真正阻挡那些想要攻击网站的hacker,但是可以提高其攻击的成本。
    详细的探讨可以参考链接

参考前端常用加密方法
参考MD5加密使用方法
参考MD5加密原理

最最基本的就是做一个混淆了:可以前后端共同定义一个对照库,加上时间戳,传送给后端,后端根据约定的库和时间戳来处理。
同时提示 服务端也不要命文存储密码

  1. cookie
    cookie是客户端保存用户信息的一种机制,用来记录客户信息
    cookie中httponly:从安全的角度后端在setCookie的时候可以将其httponly属性设置为true,此时cookie将无法通过脚本获取、编辑,提高系统安全性。
    cookie 也可以用于存储用户登录状态 存放session id (session是保存在服务端的一个数据结构,用来跟踪用户状态)
    cookie 可以帮助实现记住密码功能,当用户访问网站的时候,网站的页面脚本可以读取这个信息,自动帮你把用户名等信息填充。
    提示:对于系统安全要求比较高的系统,不建议做记住密码功能,无论密码以何种形式保存,都是不安全的。
  2. 关于用户登录后的的返回键
    登陆之后,跳转到另外一个页面,但是浏览器本身有前进和后退的功能,有时点击后退回导致页面返回到之前的登录页面,但事实是用户已经登录了,所有页面的状态都应该是已登录的,不管什么情况下都不应该让用户在看到这个页面。
    此时不建议采用window.location.href,这样浏览器还是会记录这个登录历史,应该使用 window.location.replace,替换当前历史记录。
    如果你是用React-router来完成的可以参考我的另外一篇文章
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容