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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
vue-router项目实战总结篇
Feb 11 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript实现简单计算器功能
Dec 19 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
js+cavans实现图片滑块验证
Sep 29 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
php 获取可变函数参数的函数
2009/08/26 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
在python的类中动态添加属性与生成对象
2016/09/17 Python
python实现图片文件批量重命名
2020/03/23 Python
windows下python安装pip图文教程
2018/05/25 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
运动会广播稿100字
2014/01/11 职场文书
品德评语大全
2014/05/05 职场文书
产品发布会策划方案
2014/05/12 职场文书
欢迎领导标语
2014/06/27 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android