koa2+vue实现登陆及登录状态判断
这里我们先说说登陆以及登陆状态控制需要的插件jsonwebtoken,jsonwebtoken就可以实现token的生成与反向解密出用户数据。
安装步骤:npminstalljsonwebtoken--save
安装之后先创建一个token.js,为了项目目录的清晰，可以创建一个token文件夹,将token.js放到里面。文件创建OK之后,该是写内容了,写内容之前先说说jsonwebtoken提供的方法:
1、sign：生成token、2、decod:解析token。这两个方法就是我们常用的加密和解密用的方法。
token.js我们先定义两个方法addtoken(生成token)、decrypt(解析前台传递的token),这里直接上代码
token.js内容:
constjwt=require('jsonwebtoken');
constserect='token';//生成token所需要的密钥
lettoken={
addToken:(userInfo)=>{
consttoken=jwt.sign({//这个函数需要三个参数,第一个一般是登陆用户的名字,第二个就是上面定义的密钥,第三个是过期时间单位是s,不过还可以写{expiresIn:'2h'}(代表2小时)
user:userInfo.user,
id:userInfo.id
},serect,{expiresIn:1});
returntoken;
},
decrypt:(token)=>{
if(token){
lettoke=tokens.split('')[1];
//解析
letdecoded=jwt.decode(toke,serect);//解析token需要两个参数,密钥以及前台传递的token
returndecoded;
}
}
}
exports=module.exports=token;
然后修改登陆接口,登陆之后要将生成的token传递给前台,直接看代码:
constaddToken=require('../token/token')
router.post('/login',async(ctx)=>{
letusername=ctx.request.body.username;
letpassword=ctx.request.body.password
awaituserModel.selectUser([username]).then(asyncres=>{
if(res.length===0){
ctx.body={
code:102,
message:'对不起账号不存在'
}
}else{
if(awaitmd5.MD5(password,res[0].solt)===res[0].password){
consttoken=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('对不起账号不存在')
}elseif(data.code===101){
alert('对不起密码不正确')
}elseif(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的请求拦截器,修改其头头信息，这样就不用在每个请求中添加。添加axios目录然后添加axios.js文件，内容如下:
importaxiosfrom'axios'
importstorefrom'../store'
axios.interceptors.request.use(
config=>{
config.headers.common['Authorization']='Bearer'+store.state.token;
returnconfig
}
)
exportdefaultaxios
需要请求的时候导入自己写的这个js文件(导入自己写的这个文件之后就不需要导入axios插件了)测试请求代码如下:
importaxiosfrom'../../../axios/axios'
axios.get('/api/userlist').then(({status,data})=>{
if(status===200){
if(data.code!==100){
alert('对不起,session过期,请重新登陆');
this.$router.push('/login')
}else{
this.showData()
}
}
})
后台koa2接收到请求之后先对请求头携带token进行解析,然后对比是否过期,具体代码如下:
consttoken=require('../token/addtoken')
router.get('/userlist',async(ctx,next)=>{
letwebToken=ctx.request.header.authorization;//获取头部信息携带的token
if(webToken){
//获取到token
letres=token.decrypt(webToken);//解析token
if(res&&res.exp<=newDate()/1000){//进行时间对比
ctx.body={
message:'token过期',
code:102
};
}else{
ctx.body={
message:'解析成功',
code:100
}
}
}else{//没有取到token
ctx.body={
msg:'没有token',
code:101
}
}
})
后台通过上述的方法,将数据以及登陆状态传递给前台,前台进行逻辑判断就可以实现登陆状态的判断
总结
以上所述是小编给大家介绍的koa2+vue实现登陆及登录状态判断,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢