vue 用户登陆和退出登陆

首页登陆事件一般有两种，点击登陆(click)和回车事件(keyup)，触发的是同一个事件，上代码：

// 如下是登陆页form表单部分代码
<el-form :model="loginForm" class="login-form" :rules="loginRules" ref="loginForm"><div class="userloging"><div class="title">用户登录</div></div><el-form-item prop="username"><span class="inputbeforespan">账号</span><el-inputclass="logininput"v-model="loginForm.username"type="text"style="background: transparent;font-size: 15px;"></el-input></el-form-item><el-form-item prop="password"><span class="inputbeforespan">密码</span><el-inputclass="loginpassword"style="background: transparent;font-size: 15px;"v-model="loginForm.password":type="passwordType"@keyup.enter.native="handleLogin" // 登陆回车事件></el-input></el-form-item><div class="checkpassword"><span class="rememberUser font-big"><el-checkbox v-model="checked" @change="handleChange">记住账号</el-checkbox></span><span class="forgotpassword" @click="forgotpassword">忘记密码？</span></div><el-buttonclass="formbtn"type="primary":loading="loading"@click.native.prevent="handleLogin" // 登陆Click事件>登 录</el-button></el-form>

那么在输入密码点击（回车）登陆到跳转到首页，这之间发生了什么呢？

首先要知道，在用户登陆成功之后后台会返回一个token，一串字符串，前端需要存储这个token，可以保存在vuex里面或者cookie里或者localStorage或者别的地方，在每次发送请求时可以携带这个token（请求拦截，后续介绍），后台可以根据token判断当前用户状态(登退陆成功、退出登录、登陆超时等)，从而返回相应的状态码。在axios里我们可以拦截响应，判断响应的状态码，然后根据不同的状态码去做不同的事情。

一步一步来，首页用户填写用户名密码，前台需要进行相应的处理，去掉用户名两端的空格，或者对密码进行加密，而接口可以直接在页面中请求，也可以用vuex管理，这个项目是放在vuex中管理的，代码：

// 用户名登录   此方法是在vuex 的action中管理的LoginByUsername({ commit }, userInfo) {const username = userInfo.username.trim() // 用户名处理，去掉两端的空格return new Promise((resolve, reject) => {loginByUsername(username, userInfo.password).then(res => {if (res.code === 0) {// 在每次登陆成功之后都将后台token保存在vuex及cookie中commit('SET_TOKEN', res.data.token) // 保存tooken到vuex中setToken(res.data.token) // 保存tooken到cookie中resolve(res)} else {reject(res)}}).catch(error => {reject(error)})})},

上面用到了setToken，其实对cookie的操作方法的封装，如下：

import Cookies from 'js-cookie'const TokenKey = 'Admin-Token' // cookie中用来存放tooken的名称export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {// localStorage.clear()Cookies.remove(TokenKey)return
}

（'js-cookie' 的使用这里引用一篇文章，想了解可以看下，Cookie的使用（js-cookie插件））

vuex中封装好了登陆的方法，cookie的设置也定义好了，就可以直接登陆了，但是项目需要在登录成功之后记住用户名和密码，

由于是我做的，所以比较乱，用的是localStorage，在登陆成功之后将用户名和密码保存在本地，这里牵扯一个登陆密码的加密和解密过程，分享一下代码吧

import CryptoJS from 'crypto-js'
export default {// 加密encrypt(word) {var keyStr = 'abcdefgabcdefg12'var key = CryptoJS.enc.Utf8.parse(keyStr)// Latin1 w8m31+Yy/Nw6thPsMpO5fg==var srcs = CryptoJS.enc.Utf8.parse(word)var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })return encrypted.toString()},// 解密decrypt(word) {var keyStr = 'abcdefgabcdefg12'var key = CryptoJS.enc.Utf8.parse(keyStr)// Latin1 w8m31+Yy/Nw6thPsMpO5fg==var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })return CryptoJS.enc.Utf8.stringify(decrypt).toString()}
}

那么现在可以正式登陆了：

handleLogin() {this.$refs.loginForm.validate(valid => { // form表单的校验方法this.loginForm.password = utils.encrypt(this.loginForm.password) // 对密码进行加密if (valid) {this.loading = true// vuex中登陆方法调用this.$store.dispatch('LoginByUsername', this.loginForm).then((res) => {// 如果localStorage中不存在用户名，那么将用户名密码保存在localStorage中if (!localStorage.getItem('userName') && localStorage['userName'] === undefined) {localStorage.setItem('userName', this.loginForm.username)localStorage.setItem('passWord', utils.decrypt(this.loginForm.password))localStorage.setItem('checked', this.checked) // 保存记住用户名密码选择框勾选状态} else {// 如果用户名存在则判断用户名是否改变，切换用户时从新保存用户名密码if (localStorage.getItem('userName') !== this.loginForm.username.toString() && localStorage.getItem('userName')) {localStorage.setItem('userName', this.loginForm.username)localStorage.setItem('passWord', utils.decrypt(this.loginForm.password))localStorage.setItem('checked', this.checked)}}this.$store.dispatch('GetUserLngAT')this.loading = falsethis.$router.push({ path: '/' }) // 路由指向为空会重定向到首页// 如果没有勾选记住密码则清空密码if (!this.checked) this.loginForm.password = '' }).catch((data) => {this.loading = falsethis.loginForm.password = ''// this.loginForm.password = utils.decrypt(this.loginForm.password)this.$message({type: 'info',message: data.msg})})} else {// console.log('error submit!!')this.loginForm.password = ''return false}})}

登陆成功之后便可以将tooken保存在本地缓存中，其中一个很重要的作用就是每次进入页面后可以去判断tooken是否存在，从而确认当前用户是否已经登陆，这一动作的完成可以放在router.beforeEach全局路由守卫中

前面说过在登陆成功后，后台会返回一个tooken，前台可以用不同方式保存这个tooken，在每次发起请求时需要携带这个tooken，以方便后台判断当前用户状态。那么如此我们便可以在axios里面拦截请求进行设置：

// 请求拦截器
service.interceptors.request.use(config => {// Do something before request is sent// 导出时 超时时间设为5minif (config.responseType === 'blob') {config.timeout = 1000 * 60 * 5}if (store.getters.token) {// 让每个请求携带token-- ['XN-Auth']为自定义Header keyconfig.headers['XN-Auth'] = getToken()}return config
}, error => {// Do something with request errorPromise.reject(error)
})

到这里可以算是正式登陆成功了，那么如何退出呢？

其实退出就好办了，只需要清楚本地存储的tooken信息即可，退出的方法还是通过vuex管理的：

// 前端 登出   同样是在action中管理FedLogOut({ commit }) {return new Promise(resolve => {commit('SET_TOKEN', '')removeToken()resolve()})},

// 退出事件
logout() {this.$confirm('确定退出系统?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'info'}).then(() => {this.$store.dispatch('FedLogOut')// this.$store.commit('SET_PERMS', '')this.$message({type: 'success',message: '退出成功!'})setTimeout(() => {location.reload() // 强制刷新}, 1000)}).catch(() => {this.$message({type: 'info',message: '已取消退出'})})},

vue 用户登陆和退出登陆相关推荐

退出mysql服务器的命令,mysql的登陆和退出命令格式
mysql登陆的命令格式为: 1.普通登陆mysql数据库命令格式:mysql -u 用户名 -p 密码,例如: mysql -u root -p root 如果在-p后没有提供密码,则会在执行命令 ...
用户直接关闭浏览器，直接退出登陆的实现方法【php+thinkphp】
问题背景:为了用户安全,想让用户关闭浏览器后,直接退出. 一直想着用JavaScript的方式解决这个问题,然后发现并不是那么容易解决的,中间出现各种问题,弄起来也很复杂.后面发现是自己对Cookie ...
JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
php同个用户同时只能登陆一个, 后登陆者踢掉前登陆者
php同个用户同时只能登陆一个, 后登陆者踢掉前登陆者php同个用户同时只能登陆一个, 后登陆者踢掉前登陆者通常用户登陆,如果没有特别的限定, 同一个用户可以同时登陆, 今天搞了一个东西限定一个用户 ...
Mysql -uroot -p 登陆不上_mysql的登陆和退出命令格式
mysql登陆的命令格式为: mysql -h [hostip] -u [username] -p [password] [database] 1.普通登陆mysql数据库命令格式:mysql -u ...
mysql怎么退出电脑_mysql的登陆和退出命令格式
mysql登陆的命令格式为:? 1 mysql -h [hostip] -u [username] -p [password] [database] mysql -h [hostip] -u [use ...
**简易的实现用户注册、登陆以及退出功能**
题目:程序中使用一个长度为3的对象数组,存储用户的登录名和密码: 例如如下格式: 登录名密码生日爱好注册时,要判断数组是否已满,是:则禁止注册循环为用户列出菜单: 1.注册 2.登陆 3.退 ...
Centos7+Open***使用用户及密码验证登陆
Centos7+Open***使用用户及密码验证登陆我们上一篇文章介绍了Centos7+Open***使用证书验证登陆介绍,今天我们介绍Centos7+Open***使用用户及密码登陆验证,具体就补 ...
AbpVnext 扩展企业微信扫码登录（钉钉登陆、短信登陆、微信登陆等）Vue框架
目录 1.开始开发准备 1.1 企业微信扫码登陆接入流程 1.2 开启网页授权登陆 1.3 构造独立窗口登陆二维码 1.4 构造内嵌登陆二维码 @@登陆顺序: 1. 发现文档配置 2. 获取token ...

vue 用户登陆和退出登陆

vue 用户登陆和退出登陆相关推荐

最新文章

热门文章

vue 用户登陆 和 退出登陆

vue 用户登陆 和 退出登陆相关推荐

最新文章

热门文章

vue 用户登陆和退出登陆

vue 用户登陆和退出登陆相关推荐