jwt 持久化验证前端篇,node 配置详情
请移步这里
我用的是vue3
,下面是 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
登录
点击登录按钮,登录成功,成功获取到用户名和token
验证
由于我们设置的过期时间是60s,所以要在60s内点击About页查看
60s后(过期后)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。