註冊和登陸（關於Cookie）

前記

我將描述一下登錄和註冊之間發生了什麼，將場景分爲客戶端和服務端，服務器是Node.JS,客戶端是由JS寫的

註冊

一、註冊請求

這是由客戶端發送一個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('郵箱格式錯誤')
          }
        })
    })

二、服務器檢查

服務器須要檢查發送過來的用戶名是否註冊過，若是註冊過就返回失敗，若是沒有註冊過就寫入數據庫

三、返回

寫入數據庫成功，就將註冊成功返回給用戶

登陸

一、輸入帳號密碼

輸入帳號密碼，並用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('郵箱與密碼不匹配')
        })
    })

二、服務器檢查

獲取帳號密碼，服務器查詢數據庫，看是否有對應的帳號存在

三、返回

若是有對應的存在就返回登陸成功，若是沒有，就返回登陸失敗

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上查看