JWT身份验证

JWT身份验证

作用：

• 基于token的鉴权机制，可以验证是否用户具有权限访问或者是否登录，如果没有登录或者权限，可以通过跳转形式，返回某个页面。

流程：

1. 在登录后，服务器会响应给用户一个 令牌 （token）
2. 令牌中会包括该用户的id等唯一标识
3. 浏览器收到令牌后，自己保存
4. 下次请求其他接口时，（在请求头中）携带这个令牌去请求
5. 这样服务器就知道来访者的身份了，服务器就会为该用户开发接口的访问权限，并处理该用户的数据

全局配置请求头：

因为如果配有token机制的网站，一般很多时候用户点击的时候，进行获取数据的时候，是需要一起发送请求头的，这个时候每次都要输入请求头的方式，就显得代码比较的冗余。所以这个时候我们可以直接在全局的js文件夹中，配置全局请求头，

axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');

利用令牌机制控制用户的访问权限：

第一个判断：判断本地存储是否有token

<!-- index.html -->
<!-- 本地存储有token，则说明用户登录了；没有token，则说明用户没有登录，不允许访问首页 -->
<script>
  if (localStorage.getItem('token') === null) location.href = './login.html'
</script>

上述判断只能判断token有没有，但不能判断token的真假，所以需要发送Ajax请求，根据服务器响应结果再次判断

第二个判断：根据服务器响应结果，判断token是否是假token或者过期的token

• 如果token值是正确的，是没有过期的，则服务器响应 code===0
• 如果token是错误的获取过期的，则服务器响应 code===1 && message==='身份认证失败'

// request.js 中，使用响应拦截器，拦截响应结果进行判断
// 如果响应结果中 code === 1 && message === '身份认证失败' 则表示浏览器使用了无效的token
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    if (error.response) {
        if (error.response.data.message === '身份认证失败') {
            localStorage.removeItem('token');
            location.href = './login.html'
        }
    }
    return Promise.reject(error);
});

统一处理错误提示：

所有接口响应的结果有两种：

• 响应状态码 小于 400，并且 code===1，比如登录账号密码错误。这样的响应进入响应拦截器中的第一个函数。
• 响应状态码 大于等于 400，并且 code === 1 ，比如身份认证失败。这样的响应进入响应拦截器中的第二个函数。

思路

既然有了token验证，必然就会有很多时候是没有验证的用户直接访问，那么这个时候就需要反复的去验证是否有token，这个时候我们可以通过axios里面的拦截器功能帮我们实现，避免了代码的冗余。

// request.js 中，使用响应拦截器，拦截响应结果进行判断
// 如果响应结果中 code === 1 && message === '身份认证失败' 则表示浏览器使用了无效的token
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    if (response.data.code === 1) {
        toastr.warning(response.data.message)
    }
    return response;
}, function (error) {
    // 对响应错误做点什么
    if (error.response) {
        if (error.response.data.message === '身份认证失败') {
            localStorage.removeItem('token');
            location.href = './login.html'
        } else {
            toastr.error(error.response.data.message);
        }
    }
    return Promise.reject(error);
});