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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
使用JS实现简易计算器
Jun 14 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
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
php简单的上传类分享
2016/05/15 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
利用Python获取操作系统信息实例
2016/09/02 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python可以用哪些数据库
2020/06/22 Python
Python解析微信dat文件的方法
2020/11/30 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
数据库基础的一些面试题
2012/02/25 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
入团者的自我评价分享
2013/12/02 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
班级班风口号大全
2015/12/25 职场文书
Java基础——Map集合
2022/04/01 Java/Android
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA