免费域名网站,苏州企业建设网站服务,2345网址导航高级版,wordpress怎么编辑网站1. JWT介绍 JSON Web Token 是目前最为流行的跨域认证解决方案#xff0c;本质就是一个包含信息的字符串。 如何获取#xff1a;在使用 JWT 身份验证中#xff0c;当用户使用其凭据成功登录时#xff0c;将返回 JSON Web Token#xff08;令牌#xff09;。 作用#xf…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 gitgitee.com 4.5 Git远程仓库-重新上传 1. 删除远程仓库地址 git remote remove origin 2. 添加远程仓库ssh git remote add origin 远程仓库地址 3. 推送到远程仓库首次 git push -u origin 分支名
