国内企业网站建设,企业网络营销策略研究,怎么做网站浏览量分析,软通动力和中软国际对比页面访问权限控制
什么是jwt身份认证
在前后端分离模式的开发中#xff0c;服务器如何知道来访者的身份呢#xff1f;
在登录后#xff0c;服务器会响应给用户一个 令牌 #xff08;token#xff09;令牌中会包括该用户的id等唯一标识浏览器收到令牌后#xff0c;自己…页面访问权限控制
什么是jwt身份认证
在前后端分离模式的开发中服务器如何知道来访者的身份呢
在登录后服务器会响应给用户一个 令牌 token令牌中会包括该用户的id等唯一标识浏览器收到令牌后自己保存下次请求其他接口时在请求头中携带这个令牌去请求这样服务器就知道来访者的身份了服务器就会为该用户开发接口的访问权限并处理该用户的数据 登录后要将token保存到本地存储中了。顺带个人信息也存一下用于回显。 document.querySelector(#btn-login).addEventListener(click, async function() {const data serialize(document.querySelector(form), { hash: true })// 非空校验if (!data.username) return tip(请输入用户名)if (!data.password) return tip(请输入密码)if (data.password.length 6) return tip(密码的长度不能小于6位)try {const res await axios.post(/login, data)localStorage.setItem(user-token, res.data.data.token)localStorage.setItem(user-name, res.data.data.username)tip(登录成功)location.href ./index.html}catch (e) {tip(用户名或者密码错误)}
})页面访问拦截
浏览器端可以通过合理使用令牌控制页面的访问权限。
比如用户默认只能访问登录页如果不登录就不能访问首页怎么做
登录拦截判断本地存储是否有token, 没有token拦截到登录
!-- 本地存储有token则说明用户登录了没有token则说明用户没有登录不允许访问首页 --
scriptif (localStorage.getItem(user-token) null) location.href ./login.html
/script注意上述判断只能判断token有没有但不能判断token的真假所以将来需要发送Ajax请求根据服务器响应结果再次判断 代码提交
git add .git commit -m 页面访问拦截完成显示用户名称和退出登录
common.js
// 显示用户名称和退出登录
const userName document.querySelector(.navbar .font-weight-bold)
const logout document.querySelector(#logout)
if (userName) {userName.innerHTML localStorage.getItem(user-name)
}
if (logout) {logout.addEventListener(click, () {localStorage.removeItem(user-token)localStorage.removeItem(user-name)location.href ./login.html})
}axios 拦截器
请求接口 401 错误解决
在首页获取后台统计数据发现401
// DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发
// 而无需等待样式表、图像和子框架的完成加载
document.addEventListener(DOMContentLoaded, async () {const res await axios.get(/dashboard)console.log(res);
})原因
后台接口需要进行身份认证请求时需要在请求头中携带 token未携带token或token过期后台都会返回401
document.addEventListener(DOMContentLoaded, async () {const token localStorage.getItem(user-token)const res await axios.get(/dashboard, {headers: {Authorization: token}})console.log(res);
})请求拦截器
利用请求拦截器, 本地读取token 设置给请求头
// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么const token localStorage.getItem(user-token)if (token) {config.headers.Authorization token}return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});响应拦截器
token时效两小时修改本地token发现401 模拟token失效处理401状态码 清除本地信息跳转登录分析数据层级进行数据剥离
// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data},function (error) {// 对响应错误做点什么if (error.response.status 401) {localStorage.removeItem(user-token)localStorage.removeItem(user-name)location.href ./login.html}return Promise.reject(error)}
)数据剥离后更新login逻辑
document.querySelector(#btn-login).addEventListener(click, async () {...try {const res await axios.post(/login, data)localStorage.setItem(user-token, res.data.token)localStorage.setItem(user-name, res.data.username)location.href ./index.html} catch (e) {tip(用户名密码错误)}
})代码提交
git add .git commit -m axios拦截器添加完成git远程仓库
github、gitee、gitlab
git是一个版本控制工具。github是一个代码托管平台开源社区是git的一个远程代码仓库平台。
//1. gitHub是一个面向开源及私有软件项目的托管平台因为只支持git 作为唯一的版本库格式进行托管故名gitHub。
//2. github免费代码所有人都能看到但是只有你自己能修改。付费的可以隐藏。
//3. 创建git项目时不能有中文。github官网 国外开源 git 代码托管平台
开源中国-git: 国内开源 git 代码托管平台
gitlab企业级 git 代码托管平台
码云创建远程仓库
新建右上角仓库 输入仓库名 **不勾初始化 点击创建
SSH免密码登陆
git支持多种数据传输协议
https协议https://gitee.com/jepsonpp/test.git 需要输入用户名和密码ssh协议gitgitee.com:jepsonpp/test.git 可以配置免密码登录
每次push或者pull代码如果使用https协议那么都需要输入用户名和密码进行身份的确认非常麻烦。
github为了账户的安全需要对每一次push请求都要验证用户的身份只有合法的用户才可以push使用ssh协议配置ssh免密码可以做到免密码往github推送代码
SSH免密码登录配置
1 创建SSH Keyssh-keygen -t rsa 注意这些命令需要在bash中敲2 在文件路径 C:\用户\当前用户名\ 找到 .ssh 文件夹3 文件夹中有两个文件 私钥id_rsa公钥id_rsa.pub 4 在 码云- 设置 - SSH公钥页面中5 粘贴 公钥 id_rsa.pub 内容到对应文本框中 添加公钥
如果找不到ssh(需要自己创建ssh) 输入下面的命令敲三次回车
ssh-keygen -t rsa -C 505963847qq.comgit push
作用将本地仓库中代码提交到远程仓库git push 仓库地址 分支名 将代码提交到远程仓库对应分支例子git push gitgitee.com:jepsonpp/test.git master
git push 远程主机名 本地分支名:远程分支名
如果本地分支名与远程分支名相同则可以省略冒号git remote
每次push操作都需要带上远程仓库的地址非常的麻烦我们可以给仓库地址设置一个别名
# 给远程仓库设置一个别名
git remote add 仓库别名 仓库地址
git remote add origin gitgitee.com:jepsonpp/test.git# 删除origin这个别名
git remote remove origin演示命令git push -u 仓库别名 分支名
git可视化工具 sublime Merge
git clone
作用克隆远程仓库的代码到本地git clone [远程仓库地址]git clone gitgitee.com:jepsonpp/test.git会在本地新建一个test文件夹在test中包含了一个.git目录用于保存所有的版本记录同时test文件中还有最新的代码可以进行后续的开发。git克隆默认会使用远程仓库的项目名字也可以自己指定。命令git clone [远程仓库地址] [本地项目名]
tips: git branch -a 查看分支
git pull 作用拉取更新将远程的代码下载合并到本地的分支 通常在push前需要先pull一次。
# 获取远程仓库的更新并且与本地的分支进行合并
git pull
git pull 远程主机名 分支名
git pull origin login # 获取远程分支的更新并更新合并到login分支下载远端分支本地
checkout 的 -t (或) --track )选项仅在创建新的(本地)分支时使用
先在本地建立一个分支并切换到该分支然后从远程分支上同步代码到该分支上并建立关联
git checkout -t origin/develop #远端分支名和本地新建分支名同名后续拉取该分支的更新就是切换到该分支git pull origin 分支名
综合练习
将数据可视化项目上传到码云仓库, 主分支与开发分支均要上传
git push origin mastergit push origin develop删除本地项目通过克隆把远端仓库项目拉取下来切换到develop分支
git clone 仓库地址git checkout -t origin/develop
