十九(GIT2)、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库

1. JWT介绍

JSON Web Token 是目前最为流行的跨域认证解决方案，本质就是一个包含信息的字符串。

如何获取：在使用 JWT 身份验证中，当用户使用其凭据成功登录时，将返回 JSON Web Token（令牌）。

作用：允许用户访问使用该令牌（token）允许的路由、服务和资源。

2. 黑马就业数据平台

2.1 页面访问控制(token)

// * 抽取判断是否有token的函数，供各个有敏感信息的页面使用 → index和student页面
// 1. localstorage里面获取token，判断，如果没有token提示请登录 → 跳转到login
function checkLogin() {const token = localStorage.getItem("token");if (token === null) {showToast("未登录，请先登录");setTimeout(() => {location.href = "./login.html";}, 1500);}
}

2.2 用户名渲染

// * 抽取函数渲染用户名 → 首页和学生页显示用户名
// 登录的时候保存了用户名在localstorage
// 取localstorage的用户名，找标签写入
function renderName() {const username = localStorage.getItem("username");document.querySelector(".username").innerHTML = username;
}

2.3 退出登录

// * 抽取退出登录的函数
// 点击 → 跳转到login 且删除localstorage里面的数据
function logout() {document.querySelector("#logout").addEventListener("click", function () {location.href = "./login.html";localStorage.removeItem("username");localStorage.removeItem("token");});
}

2.4 首页-统计数据

2.5 登录状态失效

// 统计数据区域
async function getData() {// const token = localStorage.getItem("token");// * common.js 已添加请求(统一设置token)和响应拦截器(统一处理token失效问题) → catch部分代码移除，try catch注释// try {/* const res = await axios.get("/dashboard", {// * 请求头参数：校验是否登录headers: { Authorization: token },}); */const res = await axios.get("/dashboard");// console.log(res);const { groupData, overview, provinceData, salaryData, year } = res.data;// console.log(overview);Object.keys(overview).forEach((key) => {document.querySelector(`.${key}`).innerHTML = overview[key];});// } catch (error) {// console.dir(error);// console.log(error.response.status); // 401// 401 token验证失败（token过期或被恶意篡改）// todo：跳转到登录页面重新登陆，本地存储数据清除/* if (error.response.status === 401) {showToast("登陆失败，请重新登录");localStorage.removeItem("username");localStorage.removeItem("token");// 延迟跳转登陆页面setTimeout(() => {location.href = "./login.html";}, 1500);} */// }
}

3. axios-拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});

3.1 请求拦截器

// * axios拦截器：请求发送之前，响应回来之后执行一些 公共 的逻辑
// * 添加请求拦截器 - 统一设置token 多次请求时需token验证，故设置拦截前完成
axios.interceptors.request.use(function (config) {// console.log(config);// config["headers"]["haha"] = "hehe";// config.headers.haha = "hehe";// headers.haha = "hehe"; // ×// 在发送请求之前做些什么,比如: 统一设置token// * 获取缓存中的token，设置请求头参数const token = localStorage.getItem("token");if (token) {config.headers.Authorization = token;}return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);

3.2 响应拦截器

// * 添加响应拦截器 - 统一处理token失效 + 数据剥离
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么，比如: 数据剥离// console.log(response.data);return response.data;},function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么: 比如统一处理token失效if (error.response.status === 401) {showToast("登陆失败，请重新登录");localStorage.removeItem("username");localStorage.removeItem("token");// 延迟跳转登陆页面setTimeout(() => {location.href = "./login.html";}, 1500);}return Promise.reject(error);}
);