jwt 持久化驗(yàn)證前端篇，node 配置詳情請(qǐng)移步這里
創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、介休網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站定制開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為介休等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
我用的是vue3，下面是 src 的目錄
用到的依賴(lài)
驗(yàn)證思路
Home 頁(yè)寫(xiě)登錄，然后在 About 頁(yè)獲取到登錄名。
登錄成功緩存 token，進(jìn)入About頁(yè)時(shí)，通過(guò)判斷是否有 token 來(lái)判斷是否登錄/登錄超時(shí)
登錄頁(yè)
在登錄頁(yè)輸入用戶名和密碼，將其提交到vuex
// src/views/Home.vue
后臺(tái) jwt
后臺(tái)的 jwt 驗(yàn)證，我們把過(guò)期時(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',{
// 過(guò)期時(shí)間
expiresIn:"60s"
}),
username,
code:200
})
})
// 登錄持久化驗(yàn)證接口 訪問(wèn)這個(gè)接口的時(shí)候 一定要訪問(wèn)token（前端頁(yè)面每切換一次，就訪問(wèn)一下這個(gè)接口，問(wèn)一下我有沒(méi)有登錄/登陸過(guò)期）
// 先訪問(wèn)登錄接口，得到token，在訪問(wèn)這個(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',{
// 過(guò)期時(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)證持久化登錄頁(yè)
從 vuex 中拿到用戶名，打開(kāi)頁(yè)面就請(qǐng)求是否登錄的 api ，從而實(shí)現(xiàn)持久化登錄驗(yàn)證
// src/views/About.vue昵稱(chēng)：{{nickname}}
操作 驗(yàn)證是否成功
運(yùn)行 node
登錄
點(diǎn)擊登錄按鈕，登錄成功，成功獲取到用戶名和token
驗(yàn)證
由于我們?cè)O(shè)置的過(guò)期時(shí)間是60s，所以要在60s內(nèi)點(diǎn)擊About頁(yè)查看
60s后（過(guò)期后）
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
