vue+express+jwt持久化登录的方法


Posted in Javascript onJune 14, 2019

jwt 持久化验证前端篇,node 配置详情请移步这里

我用的是vue3,下面是 src 的目录

vue+express+jwt持久化登录的方法

用到的依赖

vue+express+jwt持久化登录的方法

验证思路

Home 页写登录,然后在 About 页获取到登录名。
登录成功缓存 token,进入About页时,通过判断是否有 token 来判断是否登录/登录超时

登录页

在登录页输入用户名和密码,将其提交到vuex

// src/views/Home.vue

<template>
 <div class="home">
  <input type="text" v-model="user" placeholder="账号">
  <input type="text" v-model="password" placeholder="密码">
  <button @click="login">点击</button>
 </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
 data(){
  return{
   user:'',
   password:''
  }
 },
 name: 'home',
 methods:{
  ...mapActions(["toLogin"]),
  login(){
   // 请求之后能拿到用户名,nickname,把用户名存在state
   // 传入多个参数 改成对象
   // action moutation只能拿第一个参数哦,所以要改成对象
   this.toLogin({user:this.user,password:this.password})
  }
 }
}
</script>

后台 jwt

后台的 jwt 验证,我们把过期时间设置成60s

// src/app.js

let express = require('express')
let cors = require('cors')
let bodyParser = require('body-parser')
let jwt = require("jsonwebtoken")

let app = express()

app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))

// 模拟一个登陆的接口
app.post('/login',function(req,res){
  // 登录成功获取用户名
  let username = req.body.user
  res.json({
    // 进行加密的方法
    // sing 参数一:加密的对象 参数二:加密的规则 参数三:对象
    token:jwt.sign({username:username},'abcd',{
      // 过期时间
      expiresIn:"60s"
    }),
    username,
    code:200
  })
})

// 登录持久化验证接口 访问这个接口的时候 一定要访问token(前端页面每切换一次,就访问一下这个接口,问一下我有没有登录/登陆过期)
// 先访问登录接口,得到token,在访问这个,看是否成功
app.post('/validate',function(req,res){
  let token = req.headers.authorization;
  // 验证token合法性 对token进行解码
  jwt.verify(token,'abcd',function(err,decode){
    if(err){
      res.json({
        msg:'当前用户未登录'
      })
    }else {
      // 证明用户已经登录
      res.json({
        token:jwt.sign({username:decode.username},'abcd',{
          // 过期时间
          expiresIn:"60s"
        }),
        username:decode.username,
        msg:'已登录'
      })
    }
  })
})

app.listen(8000,function(){
  console.log('OK')
})

后台接口

// src/api/login.js

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000'

// axios 请求拦截
axios.interceptors.request.use(function(response){
  // 在 headers 中设置authorization 属性放token,token是存在缓存中的
  response.headers.authorization = localStorage["token"]
  return response
}, function (error) {
  return Promise.reject(error);
 })
// axios 响应拦截器
axios.interceptors.response.use(function (response) {
  return response.data;
 }, function (error) {
  return Promise.reject(error);
 });

// 登录的接口
export let loginApi = (user,password) => {
  return axios.post('/login',{user,password})
}

// 验证是否登录的接口
export let valiApi = () => {
  return axios.post('/validate')
}

vuex

// src/store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import {loginApi,valiApi} from './api/login'

export default new Vuex.Store({
 state: {
  username:""
 },
 mutations: {
  setusername(state,payload){
   // 改变state里的 username
   state.username = payload
  }
 },
 actions: {
  async toLogin({commit},{user,password}){
   let res = await loginApi(user,password)
   console.log(res)
   let {username,token} = res
   // 提交到 mutations
   commit("setusername",username)
   // token 具有时效性 登录成功 把token存在本地存储
   localStorage["token"] = token
  },
  async valiApi({commit}){
   const { username, token } = await valiApi();
   commit('setusername', username);
   localStorage["token"] = token
   return username !== undefined;
  }
 }
})

验证持久化登录页

从 vuex 中拿到用户名,打开页面就请求是否登录的 api ,从而实现持久化登录验证

// src/views/About.vue

<template>
 <div class="about">
  昵称:{{nickname}}
 </div>
</template>

<script>
import {mapState} from "vuex"
import {valiApi} from '../api/login'
export default {
 data(){
  return{
   nickname:''
  }
 },
 computed:{
  ...mapState(["username"])
 },
 // 打开这个页面 就请求 valiApi 查看用户是否登录
 async created(){
  let res = await valiApi();
  console.log(res)
  this.nickname = res.username
  if(res.username !== undefined){
   alert("welcome " + res.username)
  } else {
   alert("请登录")
  }
 }
}
</script>

操作 验证是否成功

运行 node

vue+express+jwt持久化登录的方法

登录

点击登录按钮,登录成功,成功获取到用户名和token

vue+express+jwt持久化登录的方法

验证

由于我们设置的过期时间是60s,所以要在60s内点击About页查看

vue+express+jwt持久化登录的方法

60s后(过期后)

vue+express+jwt持久化登录的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
vue实现计步器功能
Nov 01 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 #Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 #Javascript
ES6顶层对象、global对象实例分析
Jun 14 #Javascript
ES6数组与对象的解构赋值详解
Jun 14 #Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 #Javascript
通过JS深度判断两个对象字段相同
Jun 14 #Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 #Javascript
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
使用PHP开发留言板功能
2019/11/19 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
python中最小二乘法详细讲解
2021/02/19 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
为什么使用接口?
2014/08/13 面试题
市场营销专业个人求职信范文
2013/12/14 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
六查六看剖析材料
2014/10/06 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
教代会闭幕词
2015/01/28 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript