项目实用-不登录就无法访问主页

在前后端分离模式的开发中，服务器如何知道来访者的身份呢？

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

全局配置请求头

由于除了登录和注册接口外，其他所有接口都需要身份认证（都需要我们提供令牌），我们可以全局配置请求头

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

利用令牌控制页面的访问权限

比如，用户默认只能访问登录页，如果不登录就不能访问首页，怎么做？
首先，我们要判断本地存储是否有token

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

第二，我们要判断token是否是假token或者是过期的token

在全局配置中，使用响应拦截器

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

axios.interceptors.response.use(function (response) {
    //在接收响应时做什么，响应码小于400执行
    if (response.data.code === 1) {
        toastr.warning(response.data.message)
    }
    return response;
}, 
function (error) {
    // 在请求错误时对要做的事，响应码大于400
    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);
});