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 相关文章推荐
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
详解JavaScript作用域 闭包
Jul 29 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
Python微信库:itchat的用法详解
2017/08/14 Python
python3+PyQt5实现柱状图
2018/04/24 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
网络方面基础面试题
2012/11/16 面试题
如何查找网页漏洞
2016/06/22 面试题
副总经理岗位职责
2014/03/16 职场文书
食品安全承诺书
2014/05/22 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
创业计划书之熟食店
2019/10/16 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
Python 统计序列中元素的出现频度
2022/04/26 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python