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 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
angularJS 中input示例分享
Feb 09 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 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
新52大事件
2020/03/03 欧美动漫
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
python调用API实现智能回复机器人
2018/04/10 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
家长对老师的评语
2014/04/18 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
工作检讨书怎么写
2015/01/23 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
员工升职自我评价
2019/03/26 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
Element实现动态表格的示例代码
2021/08/02 Javascript
如何利用python创作字符画
2022/06/25 Python