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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
原生js实现3D轮播图
Mar 21 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
深入剖析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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
JSONP跨域请求
2017/03/02 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
使用python实现tcp自动重连
2017/07/02 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
值得收藏的10道python 面试题
2019/04/15 Python
社区党总支书记先进事迹材料
2014/01/24 职场文书
不假外出检讨书
2014/01/27 职场文书
科级干部考察材料
2014/02/15 职场文书
材料加工工程求职信
2014/02/19 职场文书
四群教育工作实施方案
2014/03/26 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
python异常中else的实例用法
2021/06/15 Python