vue express jwt持久化登录的方法

智威汤逊广告公司持久化验证前端篇，节点配置详情请移步这里

我用的是vue3，下面是科学研究委员会的目录

用到的依赖

验证思路

主页页写登录，然后在关于页获取到登录名。登录成功缓存令牌，进入关于页时，通过判断是否有代币来判断是否登录/登录超时登录页

在登录页输入用户名和密码，将其提交到状态管理

//src/view/home。vuetemplate div class=' home '输入类型='text' v-model='user '占位符='账号输入类型='text' v-model='password '占位符='密码按钮@点击='登录'点击/button/div/templatescript import { MapActions }从vuex '导出默认{ data(){ return{ user: ' '，password:'' }，name: 'home '，methods : }.mapActions([' EroIn '])，login(){ //请求之后能拿到用户名，昵称，把用户名存在状态/传入多个参数改成对象//动作山只能拿第一个参数哦，所以要改成对象这个。EroIn({ user : this。用户，密码：这个。密码})} } }/脚本后台智威汤逊广告公司

后台的智威汤逊广告公司验证，我们把过期时间设置成60年代

//src/app。jslet express=require(' express ')让CORS=require(' CORS ')让body parser=require(' body-parser ')让jwt=require(' jsonwebtoken ')让app=express()app。使用(CORS())应用程序。使用(body解析器。JSON())app。使用(body解析器。URL编码({扩展的： false })//模拟一个登陆的接口app.post('/login '，函数(请求，决议){ //登录成功获取用户名让用户名=请求。尸体。用户RES . JSON({//进行加密的方法//唱歌参数一：加密的对象参数二：加密的规则参数三：对象令牌： jwt。符号({ username : username }，' abcd '，{ //过期时间expiresIn: ' 60s ' })，用户名，代码：200 })})//登录持久化验证接口访问这个接口的时候一定要访问令牌（前端页面每切换一次，就访问一下这个接口，问一下我有没有登录/登陆过期)//先访问登录接口，得到令牌，在访问这个，看是否成功app.post('/validate '，function(req，RES){ let token=req。标题。授权；//验证代币合法性对代币进行解码jwt.verify(令牌，' abcd '，函数(错误，解码){ if(错误){ RES . JSON({ msg : '当前用户未登录}) }else { //证明用户已经登录RES . JSON({ token : jwt。符号({ username : decode。username }、' abcd '、{ //过期时间expiresIn: ' 60s ' })，username:decode.username，msg: '已登录}) } })})app.listen(8000，function(){ console.log('OK')})后台接口

//src/API/登录。jsimport axios来自' axios ' axios。默认值。baseURl=' http://localhost :8000 '/axios请求拦截axios。拦截器。请求。使用(函数(响应)){//在头球中设置批准属性放令牌，令牌是存在缓存中的回应。标题。授权=本地存储['令牌']返回响应},函数（错误){返回承诺。拒绝(错误);})//axios响应拦截器axios。拦截。回应。使用(function(response){ return response。数据；},函数（错误){返回承诺。拒绝(错误);});//登录的接口导出让loginApi=(用户，密码)={ return axios.post('/login '，{user，密码})}//验证是否登录的接口export let vali API=()={ return axios。post('/validate ')} vuex

//src/store。jsimport从' Vue '导入Vue从' Vuex '导入Vue。使用(Vuex)从“”导入{ loginApi，valiApi} ./api/login '导出默认新Vuex .存储({ state: { username:'' })，经过必要修改后为： { setusername(状态，有效负载){ //改变状态里的用户名状态。username=payload } }，actions 3360 { async OnlY in({ commit }，{user，password }){ let RES=wait loginApi(user，password)控制台。log(RES)let { username，token}=res //提交到突变提交(“setusername”，username) //令牌具有时效性登录成功把代币存在本地存储localStorage['token']=token }，async vali API({ commit }){ const { username，token }=wait vali API()；commit('setusername '，username)；localStorage['token']=令牌返回用户名！==未定义；} }})验证持久化登录页

从状态管理中拿到用户名，打开页面就请求是否登录的api，从而实现持久化登录验证

//src/view/about。vuetemplate div class=' about '昵称：{ {昵称} }/div/templatescript导入{ MapState }来自“vuex”导入{ Valiapi }来自"./API/登录'导出默认{ data(){ return }昵称：'' } }，computed:{.mapState(['username']) }，//打开这个页面就请求valiApi查看用户是否登录async created(){让RES=wait vali API()；控制台。记录这个。昵称=RES .用户名如果(RES .用户名！==未定义){ alert('欢迎使用' RES . username)} else { alert('请登录)} } }/脚本操作验证是否成功

运行结节

登录

点击登录按钮，登录成功，成功获取到用户名和代币

验证

由于我们设置的过期时间是60年代，所以要在60年代内点击关于页查看

60年代后（过期后)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。