欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+express+jwt持久化登錄的方法

 更新時(shí)間:2019年06月14日 14:29:29   作者:阿西瓜  
這篇文章主要介紹了vue+express+jwt持久化登錄的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

jwt 持久化驗(yàn)證前端篇,node 配置詳情請(qǐng)移步這里

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

用到的依賴

驗(yàn)證思路

Home 頁寫登錄,然后在 About 頁獲取到登錄名。
登錄成功緩存 token,進(jìn)入About頁時(shí),通過判斷是否有 token 來判斷是否登錄/登錄超時(shí)

登錄頁

在登錄頁輸入用戶名和密碼,將其提交到vuex

// src/views/Home.vue

<template>
 <div class="home">
  <input type="text" v-model="user" placeholder="賬號(hào)">
  <input type="text" v-model="password" placeholder="密碼">
  <button @click="login">點(diǎn)擊</button>
 </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
 data(){
  return{
   user:'',
   password:''
  }
 },
 name: 'home',
 methods:{
  ...mapActions(["toLogin"]),
  login(){
   // 請(qǐng)求之后能拿到用戶名,nickname,把用戶名存在state
   // 傳入多個(gè)參數(shù) 改成對(duì)象
   // action moutation只能拿第一個(gè)參數(shù)哦,所以要改成對(duì)象
   this.toLogin({user:this.user,password:this.password})
  }
 }
}
</script>

后臺(tái) jwt

后臺(tái)的 jwt 驗(yàn)證,我們把過期時(shí)間設(shè)置成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}))

// 模擬一個(gè)登陸的接口
app.post('/login',function(req,res){
  // 登錄成功獲取用戶名
  let username = req.body.user
  res.json({
    // 進(jìn)行加密的方法
    // sing 參數(shù)一:加密的對(duì)象 參數(shù)二:加密的規(guī)則 參數(shù)三:對(duì)象
    token:jwt.sign({username:username},'abcd',{
      // 過期時(shí)間
      expiresIn:"60s"
    }),
    username,
    code:200
  })
})

// 登錄持久化驗(yàn)證接口 訪問這個(gè)接口的時(shí)候 一定要訪問token(前端頁面每切換一次,就訪問一下這個(gè)接口,問一下我有沒有登錄/登陸過期)
// 先訪問登錄接口,得到token,在訪問這個(gè),看是否成功
app.post('/validate',function(req,res){
  let token = req.headers.authorization;
  // 驗(yàn)證token合法性 對(duì)token進(jìn)行解碼
  jwt.verify(token,'abcd',function(err,decode){
    if(err){
      res.json({
        msg:'當(dāng)前用戶未登錄'
      })
    }else {
      // 證明用戶已經(jīng)登錄
      res.json({
        token:jwt.sign({username:decode.username},'abcd',{
          // 過期時(shí)間
          expiresIn:"60s"
        }),
        username:decode.username,
        msg:'已登錄'
      })
    }
  })
})

app.listen(8000,function(){
  console.log('OK')
})

后臺(tái)接口

// src/api/login.js

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000'

// axios 請(qǐng)求攔截
axios.interceptors.request.use(function(response){
  // 在 headers 中設(shè)置authorization 屬性放token,token是存在緩存中的
  response.headers.authorization = localStorage["token"]
  return response
}, function (error) {
  return Promise.reject(error);
 })
// axios 響應(yīng)攔截器
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})
}

// 驗(yàn)證是否登錄的接口
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 具有時(shí)效性 登錄成功 把token存在本地存儲(chǔ)
   localStorage["token"] = token
  },
  async valiApi({commit}){
   const { username, token } = await valiApi();
   commit('setusername', username);
   localStorage["token"] = token
   return username !== undefined;
  }
 }
})

驗(yàn)證持久化登錄頁

從 vuex 中拿到用戶名,打開頁面就請(qǐng)求是否登錄的 api ,從而實(shí)現(xiàn)持久化登錄驗(yàn)證

// 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"])
 },
 // 打開這個(gè)頁面 就請(qǐng)求 valiApi 查看用戶是否登錄
 async created(){
  let res = await valiApi();
  console.log(res)
  this.nickname = res.username
  if(res.username !== undefined){
   alert("welcome " + res.username)
  } else {
   alert("請(qǐng)登錄")
  }
 }
}
</script>

操作 驗(yàn)證是否成功

運(yùn)行 node

登錄

點(diǎn)擊登錄按鈕,登錄成功,成功獲取到用戶名和token

驗(yàn)證

由于我們?cè)O(shè)置的過期時(shí)間是60s,所以要在60s內(nèi)點(diǎn)擊About頁查看

60s后(過期后)

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟

    vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟

    項(xiàng)目完成,我們會(huì)將項(xiàng)目進(jìn)行上線,為了提升性能,我們往往會(huì)進(jìn)行一些優(yōu)化處理,本文主要介紹了vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟,感興趣的可以了解一下
    2021-07-07
  • 項(xiàng)目中如何使用axios過濾多次重復(fù)請(qǐng)求詳解

    項(xiàng)目中如何使用axios過濾多次重復(fù)請(qǐng)求詳解

    在項(xiàng)目開發(fā)中經(jīng)常需要處理重復(fù)點(diǎn)擊導(dǎo)致多次調(diào)用接口的問題,這篇文章主要介紹了項(xiàng)目中如何使用axios過濾多次重復(fù)請(qǐng)求的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目

    基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目

    這篇文章主要介紹了基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目,項(xiàng)目中主要用了Flex布局,以及viewport相關(guān)知識(shí),已達(dá)到適應(yīng)各終端屏幕的目的。需要的朋友可以參考下
    2018-02-02
  • vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼

    vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼

    我們?cè)谳斎脬y行賬號(hào)會(huì)設(shè)置每四位添加一個(gè)空格,輸入金額,每三位添加一個(gè)空格。那么,在vue,element-ui 組件中,如何實(shí)現(xiàn)呢?下面小編給大家?guī)砹藇ue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧
    2018-09-09
  • vite前端構(gòu)建Turborepo高性能monorepo方案

    vite前端構(gòu)建Turborepo高性能monorepo方案

    這篇文章主要為大家介紹了vite前端構(gòu)建Turborepo高性能monorepo方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • vue中keep-alive組件實(shí)現(xiàn)多級(jí)嵌套路由的緩存

    vue中keep-alive組件實(shí)現(xiàn)多級(jí)嵌套路由的緩存

    本文主要介紹了vue中keep-alive組件實(shí)現(xiàn)多級(jí)嵌套路由的緩存,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼

    vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼

    這篇文章主要介紹了vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • vue 獲取及修改store.js里的公共變量實(shí)例

    vue 獲取及修改store.js里的公共變量實(shí)例

    今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue基于better-scroll仿京東分類列表

    vue基于better-scroll仿京東分類列表

    這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • 在Vue項(xiàng)目中用fullcalendar制作日程表的示例代碼

    在Vue項(xiàng)目中用fullcalendar制作日程表的示例代碼

    這篇文章主要介紹了在Vue項(xiàng)目中用fullcalendar制作日程表,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08

最新評(píng)論