上海网站论坛建设,wordpress邮箱修改,龙岗网站(建设深圳信科),友好酒店网站建设方案书K8s 管理系统项目[前端部分–登录和登出]
1. 登录登出流程
1.1 登录流程
登入流程总的分为5步:
账号密码验证token生成token验证验证成功进行跳转验证失败返回/login 1.2 登出流程
登出流程就相对简单,分为2步
删除Token跳转/login 2. 登录代码
src/views/login/Login.v…K8s 管理系统项目[前端部分–登录和登出]
1. 登录登出流程
1.1 登录流程
登入流程总的分为5步:
账号密码验证token生成token验证验证成功进行跳转验证失败返回/login 1.2 登出流程
登出流程就相对简单,分为2步
删除Token跳转/login 2. 登录代码
src/views/login/Login.vue
这个页面纠结了很久,主要是因为vue-cli从4到5后polyfills不再被包含造成一系报错.不得不放弃jwt改用md5实现. 还有个就是加密的话,如果jwt可以用加盐的方式进行加密. md5原生只能通过特定的进行加密并比较.想了下单纯用用户名做token的md5加密每次进去都会是一样的.需要手工加个盐,那么就把登录时间作为盐,进行加密和验证. 当然这里只是个演示环境用的方法太简单了.生产中肯定不会这么用.或者小伙伴有更好的方法也请留言.
另外这里为了美观,添加了一个图片,如果不喜欢可以注释掉98行
templatediv classlogin!-- 用户登录卡片 --el-card classlogin-cardtemplate #headerdiv classlogin-card-headerspan用户登录/span/div/template!-- 表单 --el-form :modelloginData :rulesloginDataRules refloginDatael-form-item propusername!-- 用户名 --el-input prefix-iconUserFilled v-model.trimloginData.username maxlength32 placeholder请输入账号 clearable/el-input/el-form-itemel-form-item proppassword!-- 密码 --el-input prefix-iconLock v-model.trimloginData.password maxlength16 show-password placeholder请输入密码 clearable/el-input/el-form-itemel-form-item!-- 登录按钮 --el-button typeprimary stylewidth: 100%;border-radius: 2px :loadingloginLoading clickhandleLogin登 录/el-button/el-form-item/el-form/el-card/div
/templatescript
import common from ../common/Config;
import httpClient from ../../utils/request;
import moment from moment;
import md5 from md5;export default{data() {return {//加载等待动画loginLoading: false,//登录验证的后端接口loginUrl: common.loginAuth,loginData: {username: ,password: },//校验规则loginDataRules: {username: [{required: true,message: 请填写用户名,trigger: change}],password: [{required: true,message: 请填写密码,trigger: change}],}}},methods: {//登录方法handleLogin() {httpClient.post(this.loginUrl, this.loginData).then(res {//账号密码校验成功后的一系列操作localStorage.setItem(username, this.loginData.username);localStorage.setItem(loginDate, moment().format(YYYY-MM-DD_HH:mm:ss));const salt localStorage.getItem(username)localStorage.getItem(loginDate)//生成tokenconst tokenExpireTime new Date(Date.now() 24 * 60 * 60 * 1000); // 过期时间24小时后// const token jwt.sign(this.loginData.username, test, options);const token md5(salt);localStorage.setItem(token, token); // 将Token保存到localStorage中localStorage.setItem(tokenExpireTime, tokenExpireTime.getTime().toString()); // 将过期时间保存到localStorage中//跳转至根路径this.$router.push(/);this.$message.success({message: res.msg})}).catch(res {this.$message.error({message: res.msg})})}}
}
/scriptstyle scoped
.login {position: absolute;width: 100%;height: 100%;background: aquamarine;background-image: url(../../assets/img/login.png);background-size: 100%;
}
.login-card {position: absolute;left: 70%;top: 15%;width: 350px;border-radius: 5px;background: rgb(255, 255, 255);overflow: hidden;
}
.login-card-header {text-align: center;
}
/style3. 登录页路由
2.1 login页面
src/router/index.js {path: /login, //url路径component: () import(/views/login/Login.vue), //视图组件meta: {title: 登录, requireAuth: false}, //meta元信息}2.2 拦截器
这里去验证是否有token和token是否过期.如果过期了就跳转到/login页面
// 导入md5
import md5 from md5;
//路由守卫路由拦截
router.beforeEach((to, from, next) {//启动进度条NProgress.start()//设置头部if (to.meta.title) {document.title to.meta.title} else {document.title Kubernetes}// 放行if (window.location.pathname /login) {next()}else{// 获取localStorage中保存的Token和过期时间const storedToken localStorage.getItem(token);const storedTokenExpireTime localStorage.getItem(tokenExpireTime);// 如果没有保存Token或过期时间或者Token已经过期则跳转到登录页面if (!storedToken || !storedTokenExpireTime || Date.now() parseInt(storedTokenExpireTime)) {// 删除localStorage中保存的Token和过期时间localStorage.removeItem(token);localStorage.removeItem(tokenExpireTime);// 如果当前不在登录页面则跳转到登录页面if (window.location.pathname ! /login) {window.location.href /login;}} else {// 验证Token是否正确const salt localStorage.getItem(username)localStorage.getItem(loginDate)const token md5(salt); // 使用md5算法生成Tokenif (token storedToken) {// Token正确且在有效期内继续进行其他操作// TODO: 继续访问next()} else {// Token错误跳转到登录页面localStorage.removeItem(token);localStorage.removeItem(tokenExpireTime);// 如果当前不在登录页面则跳转到登录页面if (window.location.pathname ! /login) {window.location.href /login;}}}}
})4. 登出代码
src/layout/Layout.vue
这部分还是比较简单的.其实和路由守卫判断token失效是一样的
script//登出logout() {//移除用户名localStorage.removeItem(username);//移除tokenlocalStorage.removeItem(token);//跳转至/login页面this.$router.push(/login);}
/script5. 效果
登录页 清理掉本地存储进行登录 密码验证成功后会生成username,loginDate,token,tokenExpireTime这4个键值对
其中username存放用户名,loginDate存放登录时间(用于产生过期时间和作为md5运算的盐),token存放md5加密后的token,tokenExpireTime存放token过期时间. 此时进行不同页面切换,可以正常访问 如果修改username,loginDate,token则会因为token验证失败跳转到登录页面 再访问其他任意页面就调回了/login页面并清理掉了token和tokenExpireTime 调小tokenExpireTime值一样(将值由1677733016817改为1627733016817) 一样会清理掉token和tokenExpireTime并跳转/login 至此,整个前后端的开发已经完成.下面进入环境部署环节
