校园网站建设检查自评报告,潍坊市作风建设年活动网站,公主岭网站建设,手机网站描述常见的几种实现方式
1 基于spring security 的remember me 功能
localStorage
除非主动清除localStorage 里的信息 #xff0c;不然永远存在#xff0c;关闭浏览器之后下次启动仍然存在
存放数据大小一般为5M
不与服务器进行交互通信 cookies
可以…常见的几种实现方式
1 基于spring security 的remember me 功能
localStorage
除非主动清除localStorage 里的信息 不然永远存在关闭浏览器之后下次启动仍然存在
存放数据大小一般为5M
不与服务器进行交互通信 cookies
可以手动设置过期时间关闭浏览器之后就清除了
存放数据大小一般为4K
每次请求都会被传送到服务器 增加一个remeber me的标签 在登录页中 在登录方法中 添加如下代码 登录成功写入cookie 在js模块
挂载 getCookie 函数 methods 方法中实现 三个函数 getCookie setCookie clearCookie
getCookie setCookie clearCookie 完整代码
templatediv classlogin_container !-- 绘制全页面背景色--div classlogin_box !-- 绘制登录白色盒子--div classavatar_box !-- 白色盒子内 头像区域 引入logo --img src../assets/gezi.png alt //div!-- 登录表单区域 ref定义一个响应式对象loginForm :model属性绑定方式 表单所有数据都自动同步到loginForm对象上:rules是el-form组件通过属性绑定添加数据验证行为--el-form refloginForm :modelloginForm :rulesrules label-width80px classlogin_form !-- 需要把输入框放到页面偏下的位置login_form加一个定位器--!-- 用户名 --el-form-item label用户el-input :prefix-iconUser v-modelloginForm.username placeholder请输入用户名 /el-input/el-form-item!-- 密码 --el-form-item label密码el-input :prefix-iconLock v-modelloginForm.password typepassword placeholder请输入密码 show-password/el-input/el-form-item!-- 按钮区域 --el-row justifyend !-- 设置按钮在右边靠齐 --el-form-item classbtn !-- 按钮区域定义一个类 按钮向右对齐--el-button typeprimary clicklogin stylewidth: 100%; margin-top: 5px登录/el-button
!-- el-button clickregister没有注册请注册/el-button--/el-form-itemel-form-itemel-checkbox label记住我 v-modelchecked/el-checkbox/el-form-item/el-row/el-form/div/div
/template
script
import qs from qs
//页面上按需引入icon
import { User, Lock } from element-plus/icons-vue
import ElMessage from element-plus;
import { onMounted} from vue;export default {name: Login,setup() {let sub_btn () {if (!loginForm.username || !loginForm.password) {ElMessage.error(账户或者密码不能为空);}};//引用的图标通过Setup进行注册return {User,Lock,sub_btn,};},mounted() {this.getCookie()},data(){return{// 登录表单的数据绑定对象loginForm: {username: ,password: },rules:{ // 验证规则对象// name为验证规则数组每个验证规则都是一个数组 trigger表示触发验证机制blur鼠标失去焦点时触发本次验证行为username: [{ required: true, message: 请输入用户名, trigger: blur}],password: [{ required: true, message: 请输入密码, trigger: blur},{ min: 3, max: 15, message: 密码长度6到15个字符, trigger: blur}],}}},methods:{login(){const that thisthis.$refs.loginForm.validate(async valid {if (!valid) return// 将loginForm对象转换为查询字符串var data qs.stringify(this.loginForm)// 由于data属性是一个json对象需要进行解构赋值{data:result}进行状态码判断await this.$http.post(/api/doLogin,data).then(function (response){if (response.data.status 200){console.log(登录成功)that.$message.success(登录成功)// cookie 密码记录window.sessionStorage.setItem(user, JSON.stringify(response.object))// 路由跳转到Home页that.$router.push(/home)}else {console.log(登录失败api后端接口状态,response.data.status)that.$message.error(登录失败后端接口状态码response.data.status)}})});// 判断复选框是否被勾选 勾选在调用cookie 方法if (this.checked true) {// 过期天数为7天this.setCookie(this.loginForm.username, this.loginForm.password, 7)}else{// 清除cookie}},register(){this.$router.push(/LoginRegister)},// 读取cookiegetCookie: function (){if (document.cookie.length 0) {// cookie 分割成一个个独立的 key value 形式let arr document.cookie.split(;)for (var i 0; i arr.length; i){var arr2 arr[i].split()if (arr2[0] userName) {this.loginForm.username arr2[1]} else if (arr2[0] userPwd){this.loginForm.password arr2[1]}}}},// 设置cookiesetCookie(name, pwd, exdays){var exdate new Date()//exdate.setTime(exdate.setTime() 24 * 60 * 60 * 1000 * exdays);window.document.cookie userName name ;path/;expires exdate.toUTCString();window.document.cookie userPwd pwd ;path/;expires exdate.toUTCString();},// 清除cookieclearCookie: function() {this.setCookie(, , -1);}}
//
}
/script
