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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
详解vue express启动数据服务
Jul 05 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
中东人咖啡哲学
2021/03/03 咖啡文化
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
php curl_init函数用法
2014/01/31 PHP
php解决约瑟夫环示例
2014/04/09 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
对于Python的Django框架部署的一些建议
2015/04/09 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python读写压缩文件的方法
2020/07/30 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
《石榴》教学反思
2014/03/02 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2014年团工作总结
2014/11/27 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
单位工资证明范本
2015/06/12 职场文书
美容院管理规章制度
2015/08/05 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python