koa2+vue实现登陆及登录状态判断
65 浏览量
2020-10-16
13:54:54
上传
评论
收藏 58KB PDF 举报
koa2+vue实现登陆及登录状态判断实现登陆及登录状态判断
主要介绍了koa2+vue实现登陆及登录状态判断，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋
友可以参考下
这里我们先说说登陆以及登陆状态控制需要的插件jsonwebtoken,jsonwebtoken就可以实现token的生成与反向解密出用户数据。
安装步骤: npm install jsonwebtoken --save
安装之后先创建一个token.js, 为了项目目录的清晰，可以创建一个token文件夹,将token.js放到里面。文件创建OK之后,该是写内容了,写内容之前
先说说jsonwebtoken提供的方法:
1、sign： 生成token、2、decod: 解析token。 这两个方法就是我们常用的加密和解密用的方法。
token.js 我们先定义两个方法addtoken(生成token)、decrypt(解析前台传递的token), 这里直接上代码
token.js内容:
const jwt = require('jsonwebtoken');
const serect = 'token'; //生成token所需要的密钥
let token = {
addToken: (userInfo) => {
const token = jwt.sign({ //这个函数需要三个参数, 第一个一般是登陆用户的名字, 第二个就是上面定义的密钥,第三个是过期时间 单位是s ,不过还可以写 {expiresIn:'2h'}(代表2小时)
user: userInfo.user,
id: userInfo.id
}, serect, {expiresIn: 1});
return token;
},
decrypt: (token) => {
if (token) {
let toke = tokens.split(' ')[1];
// 解析
let decoded = jwt.decode(toke, serect); //解析token需要两个参数,密钥 以及 前台传递的token
return decoded;
}
}
}
exports = module.exports = token;
然后修改登陆接口, 登陆之后要将生成的token传递给前台, 直接看代码:
const addToken = require('../token/token')
router.post('/login',async (ctx)=> {
let username = ctx.request.body.username;
let password = ctx.request.body.password
await userModel.selectUser([username]).then(async res => {
if (res.length === 0) {
ctx.body = {
code: 102,
message: '对不起账号不存在'
}
} else {
if (await md5.MD5(password,res[0].solt) === res[0].password) {
const token = addToken.addToken({user: res[0].name, id: res[0].id}) //主要是这里 生成token
ctx.body = {
code: 100,
message: '登陆成功',
token
}
} else {
ctx.body = {
code: 101,
message: '对不起密码错误'
}
}
}
})
})
后台传递的token值,前台需要保存,我们使用的vue所以可以使用vuex将收到的token保存起来(这里提示vuex当页面刷新里面的数据会清除,所
以建议保存在localStorage里面当然也可以使用vuex-along 这个组件,这个组件其实就是帮我们把vuex的数据再保存在loaclStorage里面)
axios.post('/api/login', user).then(({status, data}) => {
if (status === 200) {
if (data.code === 102) {
alert('对不起账号不存在')
} else if (data.code === 101) {
alert('对不起密码不正确')
} else if (data.code === 100) {
alert('登陆成功')
console.log(data)
this.$store.dispatch('tokenAddFun', data.token)
this.$store.dispatch('userAddFun', user.username)
this.$router.push('/')
}
}
})
然后在每次请求的时候将token添加在请求的头信息中: 我们使用的是axios，所以可以使用axios的请求拦截器,修改其头头信息，这样就不用
资源评论
