koa2+vue实现登陆及登录状态判断


Posted in Javascript onAugust 15, 2019

这里我们先说说登陆以及登陆状态控制需要的插件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的请求拦截器,修改其头头信息,这样就不用在每个请求中添加。添加axios目录然后添加axios.js文件,内容如下:

import axios from 'axios'
import store from '../store'
axios.interceptors.request.use(
  config => {
    config.headers.common['Authorization'] = 'Bearer '+ store.state.token;
    return config
  }
)
export default axios

需要请求的时候 导入自己写的这个js文件(导入自己写的这个文件之后就不需要导入 axios插件了)测试请求代码如下:

import axios from '../../../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进行解析,然后对比是否过期,具体代码如下:

const token = require('../token/addtoken')
router.get('/userlist', async (ctx, next) => {
 let webToken = ctx.request.header.authorization; //获取头部信息携带的token
 if (webToken){
  // 获取到token
  let res = token.decrypt(webToken); //解析token
  if (res && res.exp <= new Date()/1000){ //进行时间对比
   ctx.body = {
    message: 'token过期',
    code:102
   };
  } else {
   ctx.body = {
    message: '解析成功',
    code:100
   }
  }
 } else{ // 没有取到token
  ctx.body = {
   msg:'没有token',
   code: 101
  }
 }
})

 后台通过上述的方法,将数据以及登陆状态传递给前台,前台进行逻辑判断 就可以实现登陆状态的判断

总结

以上所述是小编给大家介绍的koa2+vue实现登陆及登录状态判断,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢

Javascript 相关文章推荐
splice slice区别
Oct 09 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
js实现加载更多功能实例
Oct 27 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 #Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 #Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 #Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 #Javascript
js设计模式之单例模式原理与用法详解
Aug 15 #Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 #Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 #Javascript
You might like
基于mysql的论坛(7)
2006/10/09 PHP
php生成验证码函数
2015/10/20 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
php微信开发之上传临时素材
2016/06/24 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
25岁生日感言
2014/01/13 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
2014年店长工作总结
2014/11/17 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python