您好,登錄后才能下訂單哦!
jwt 持久化驗(yàn)證前端篇,node 配置詳情
請(qǐng)移步這里
我用的是vue3
,下面是 src 的目錄
用到的依賴(lài)
驗(yàn)證思路
Home 頁(yè)寫(xiě)登錄,然后在 About 頁(yè)獲取到登錄名。
登錄成功緩存 token,進(jìn)入About頁(yè)時(shí),通過(guò)判斷是否有 token 來(lái)判斷是否登錄/登錄超時(shí)
登錄頁(yè)
在登錄頁(yè)輸入用戶(hù)名和密碼,將其提交到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)求之后能拿到用戶(hù)名,nickname,把用戶(hù)名存在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)證,我們把過(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){ // 登錄成功獲取用戶(hù)名 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)證接口 訪(fǎng)問(wèn)這個(gè)接口的時(shí)候 一定要訪(fǎng)問(wèn)token(前端頁(yè)面每切換一次,就訪(fǎng)問(wèn)一下這個(gè)接口,問(wèn)一下我有沒(méi)有登錄/登陸過(guò)期) // 先訪(fǎng)問(wèn)登錄接口,得到token,在訪(fǎng)問(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)前用戶(hù)未登錄' }) }else { // 證明用戶(hù)已經(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 中拿到用戶(hù)名,打開(kāi)頁(yè)面就請(qǐng)求是否登錄的 api ,從而實(shí)現(xiàn)持久化登錄驗(yàn)證
// src/views/About.vue <template> <div class="about"> 昵稱(chēng):{{nickname}} </div> </template> <script> import {mapState} from "vuex" import {valiApi} from '../api/login' export default { data(){ return{ nickname:'' } }, computed:{ ...mapState(["username"]) }, // 打開(kāi)這個(gè)頁(yè)面 就請(qǐng)求 valiApi 查看用戶(hù)是否登錄 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)擊登錄按鈕,登錄成功,成功獲取到用戶(hù)名和token
驗(yàn)證
由于我們?cè)O(shè)置的過(guò)期時(shí)間是60s,所以要在60s內(nèi)點(diǎn)擊About頁(yè)查看
60s后(過(guò)期后)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。