注册和登录(关于Cookie)

前记

我将描述一下登陆和注册之间发生了什么,将场景分为客户端和服务端,服务器是Node.JS,客户端是由JS写的

注册

1、注册请求

这是由客户端发送一个POST请求给服务端,其中包含了用户名和密码

let $form = $('#signUpForm')
    $form.on('submit', (e)=>{
      e.preventDefault()
      let hash = {}
      let need = ['email', 'password', 'password_confirmation']
      need.forEach((name)=>{
        let value = $form.find(`[name=${name}]`).val()
        hash[name] = value
      })
      $form.find('.error').each((index, span)=>{
        $(span).text('')
      })
      $.post('/sign_up', hash)  
        .then((response)=>{
          console.log(response)
        }, (request)=>{
          let {errors} = request.responseJSON
          if(errors.email && errors.email === 'invalid'){
            $form.find('[name="email"]').siblings('.error')
              .text('邮箱格式错误')
          }
        })
    })

2、服务器检查

服务器需要检查发送过来的用户名是否注册过,如果注册过就返回失败,如果没有注册过就写入数据库

3、返回

写入数据库成功,就将注册成功返回给用户

登录

1、输入账号密码

输入账号密码,并用POST发送给服务器,可以检查输入格式

let $form = $('#signInForm')
    $form.on('submit', (e) => {
      e.preventDefault()
      let hash = {}
      let need = ['email', 'password']
      need.forEach((name) => {
        let value = $form.find(`[name=${name}]`).val()
        hash[name] = value
      })
      $form.find('.error').each((index, span) => {
        $(span).text('')
      })
      $.post('/sign_in', hash)
        .then((response) => {
          window.location.href = '/'
        }, (request) => {
          alert('邮箱与密码不匹配')
        })
    })

2、服务器检查

获取账号密码,服务器查询数据库,看是否有对应的账号存在

3、返回

如果有对应的存在就返回登录成功,如果没有,就返回登录失败

Cookie

在上面的注册和登录过程中会有一些问题,网站是如何判断登录与否的,有些页面只有登录才可以访问,另外,如何来确认登录的是谁,这样才不会搞混乱,这时就需要引入Cookie来解决这些问题

设置Cookie

在登录的一瞬间,服务器通过Set-Cookie,例如

        response.setHeader('Set-Cookie', `sign_in_email=${email}`)

告诉浏览器,在这个用户上做了个标记,以后只要相同的源的请求都会带上这个Cookie,服务器Set-Cookie的是什么,浏览器Cookie就会是什么。

期限

Cookie并不是永久有效的,就像游乐场的门票一样,你在游乐场去任何地方都需要这张门票,但是这个门票会有期限,这个期限可以自己设置,和关闭浏览器便失效的会话期Cookie不同,持久性Cookie可以指定一个特定的过期时间(Expires)或有效期(Max-Age)。

response.setHeader('Set-Cookie', `id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT`)

当Cookie的过期时间被设定时,设定的日期和时间只与客户端相关,而不是服务端。

特点

  1. 服务器通过Set-Cookie响应头来设置Cookie
  2. 浏览器得到Cookie后,每次请求都会带上Cookie
  3. 服务器读取Cookie就知道登录用户的信息
  4. Cookie存在电脑上的一个秘密的文件位置
  5. Cookie并不安全,可以做假
  6. Cookie有效期的默认时间由浏览器决定,后端可以强制设置
  7. 不同浏览器上的Cookie不可以互通

关于Cookie的更多信息,可以在MDN上查看

    原文作者:梁广铭
    原文地址: https://segmentfault.com/a/1190000016037678
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞