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);}
);4. Git 远程仓库
远程仓库是指托管在因特网或其他网络中的个人项目版本库。
作用：本地仓库备份，多人协作。
4.1 新建仓库及推送
添加远程仓库：git remote add origin 远程仓库地址
推送到远程仓库(首次)：git push -u origin "分支名"
推送到远程仓库(重复)：git push
4.2 远程仓库-克隆
克隆（clone）: 获得一份已经存在了的 Git 仓库的拷贝。
1. 执行命令，克隆仓库
git clone 远程仓库地址
2. 命令行工具，进入目录
cd 仓库目录
3. 查看并切换分支
git branch –a
git checkout 分支名
4.3 远程仓库-拉取
拉取（pull）: 从远程仓库拉取代码并合并到本地。
注意: 如果要让其他人访问自己的仓库，需要设置为 开源
git pull
4.4 配置SSH
SSH是一种网络协议，用于计算机之间的加密登录。
1. 生成ssh公钥：ssh-keygen -t ed25519 -C "任意名字"
2. 查看及拷贝公钥：cat ~/.ssh/id_ed25519.pub
3. 配置公钥到gitee
4. 测试激活：ssh -T git@gitee.com
4.5 Git远程仓库-重新上传
1. 删除远程仓库地址
git remote remove origin
2. 添加远程仓库（ssh）
git remote add origin 远程仓库地址
3. 推送到远程仓库（首次）
git push -u origin 分支名