鉴权原理之 Session / Jwt

实现用户登录功能

• 前端写好登陆页面，即 form 表单，让用户填写信息后发请求
• 后端接受到请求，获取的用户的数据进行数据库校验
• 匹配成功，后端应该标记用户已经登录

如何标记？ 使用 cookie

Cookie

• cookie 是服务器发给浏览器的一段字符串
• 之后发起同样二级域名请求时，浏览器都必须带上 cookie 才可继续操作
• 由服务器端向客户端发送cookie

设置响应头：Set-Cookie (使用 cookie 的具体操作)

1. 用户信息匹配成功后设置 cookie
2. 设置响应头 response.setHeader("Set-Cookie", user_id=${user.id}), 记录用户id
3. 登录成功跳转到首页，获取到请求头里面的 cookie ,将携带的用户信息取出，使用到页面

控制台会显示cookie的信息，因此会暴露用户的数据，并且可随意修改不安全！

我们可以使用 session ,以防篡改 user.id。把信息隐藏在服务器

Session

• 用户信息匹配成功后
• 把用户信息放入服务器的 x 里，
• 在 x 里存放随机 id 对应一个用户信息
• 把随机 id 发给浏览器，即设置响应头 response.setHeader("Set-Cookie", session_id=${random}; HttpOnly);
• 下次发请求就会通过 x[id] 获取用户信息
• x 是文件,叫 session ，也叫会话

 		const random = Math.random()
        session[random] = {user_id: user.id}
        fs.writeFileSync('./session.json', JSON.stringify(session))
        response.setHeader("Set-Cookie", `session_id=${random}; HttpOnly`);

Cookie/Session

• 服务器可以给浏览器下发 cookie
• 浏览器中的 cookie 可被篡改
• 让服务器发不可篡改的 cookie （放一个 id 随机数1，session[id] 放用户信息）
• 后端可拿信息，前端无法改

Jwt

• token ：用户的身份

流程

1. 用户第一次发登录请求，服务器验证成功后生成一个 token
2. 登录成功 并保存了 token，放到 localStorage 进行储存
3. 用户再次发送请求给服务器，发现 localStorage 里有 token，就把 token 放到请求头
4. 下次发请求就会自动带上 token

if (localStorage.token) {
      axios.defaults.headers.common["Authorization"] = localStorage.token;
    }
    axios(option)
      .then(res => {
        console.log(res.data);
        if (res.data.status === "ok") {
          if (res.data.token) {
            localStorage.token = res.data.token;
          }
          resolve(res.data);
        } else {
          Message.error(res.data.msg);
          reject(res.data);
        }
      })
      .catch(() => {
        Message.error("网络异常");
        reject({ msg: "网络异常" });
      });
  });
}

二者区别

• 使用 jwt 服务端无需储存数据，只需校验
• 使用 jwt 安全机制更高：对于跨域的情况 ，可能无法带上 cookie/session