express + jwt 持久化登录(vue前端篇)

2019-06-14 admin

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

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

src目录

用到的依赖

图片描述

验证思路

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

    运行node成功

  • 登录

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

    登录

  • 验证

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

      图片描述

    • 60s后**(过期后)**

      图片描述

[转载]原文链接:https://segmentfault.com/a/1190000019476705

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67275.html

文章标题:express + jwt 持久化登录(vue前端篇)

相关文章
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
js监听input输入框值的实时变化实例
1、在元素上同时绑定 oninput 和onporpertychanger事件 例: &lt;script type=&quot;text&#x2F;JavaScript&quot;&gt; function aa(e){alert(&qu...
2017-02-16
回到顶部