vue +表达+ jwt持久化登录的方法

jwt持久化验证前端篇,节点<代码>配置详情> 　　

我用的是<代码> vue3> 　　

用到的依赖

<强>验证思路

家页写登录,然后在对页获取到登录名。
　　登录成功缓存牌,进入对页时,通过判断是否有令牌来判断是否登录/登录超时 　　

<>强登录页

　　

在登录页输入用户名和密码,将其提交到vuex

　　 　　//src/视图/Home.vue 　　 　　& lt; template> 　　& lt; div类=凹摇北? 　　& lt;输入类型=拔谋尽眝模型=坝没А闭嘉环?罢恕焙旁? 　　& lt;输入类型=拔谋尽眝模型=懊苈搿闭嘉环?懊苈搿北? 　　& lt;按钮@click="登录"祝辞点击& lt;/button> 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　从“vuex”进口{mapActions} 　　出口默认{ 　　数据(){ 　　返回{ 　　用户:”, 　　密码:" 　　} 　　}, 　　名称:“回家”, 　　方法:{ 　　…mapActions ([" toLogin "]), 　　登录(){//请求之后能拿到用户名、昵称,把用户名存在的状态//传入多个参数改成对象//行动moutation只能拿第一个参数哦,所以要改成对象 　　this.toLogin({用户:this.user,密码:this.password}) 　　} 　　} 　　} 　　& lt;/script> 　　 　　

<强>后台jwt

　　

后台的jwt验证,我们把过期时间设置成60年代

　　 　　//src/app.js 　　 　　让表达=要求(表达) 　　让歌珥=要求(“歌珥”) 　　让bodyParser=要求(体) 　　让jwt=要求(“jsonwebtoken”) 　　 　　让应用程序=表示() 　　 　　app.use(歌珥()) 　　app.use (bodyParser.json ()) 　　app.use (bodyParser.urlencoded({扩展:假}))//模拟一个登陆的接口 　　app.post(/登录,函数(点播,res) {//登录成功获取用户名 　　让用户名=req.body.user 　　res.json ({//进行加密的方法//唱参数一:加密的对象参数二:加密的规则参数三:对象 　　令牌:jwt.sign (abcd的{用户名:用户名},{//过期时间 　　expiresIn:“六十年代” 　　}), 　　用户名、 　　代码:200 　　}) 　　})//登录持久化验证接口访问这个接口的时候一定要访问令牌(前端页面每切换一次,就访问一下这个接口,问一下我有没有登录/登陆过期)//先访问登录接口,得到令牌,在访问这个,看是否成功 　　app.post(/验证,函数(点播,res) { 　　让牌=req.headers.authorization;//验证牌合法性对令牌进行解码 　　jwt.verify(令牌,“abcd”,函数(呃,解码){ 　　如果(err) { 　　res.json ({ 　　味精:“当前用户未登录的 　　}) 　　其他}{//证明用户已经登录 　　res.json ({ 　　令牌:jwt.sign({用户名:decode.username},“abcd”{//过期时间 　　expiresIn:“六十年代” 　　}), 　　用户名:decode.username, 　　味精:“已登录的 　　}) 　　} 　　}) 　　}) 　　 　　app.listen(8000年,函数(){ 　　console.log(“好”) 　　}) 　　 　　

后台接口

　　 　　//src/api/login.js 　　 　　从“axios”进口axios 　　axios.defaults.baseURL=' http://localhost: 8000 '//axios请求拦截 　　axios.interceptors.request.use(函数(响应){//在标题中设置授权属性放令牌,令牌是存在缓存中的 　　response.headers。授权=localStorage(“令牌”) 　　返回响应 　　(错误){},函数 　　返回Promise.reject(错误); 　　})//axios响应拦截器 　　axios.interceptors.response.use(函数(响应){ 　　返回response.data; 　　(错误){},函数 　　返回Promise.reject(错误); 　　});//登录的接口 　　出口让loginApi=(用户、密码)=比;{ 　　返回axios.post(/登录,{用户,密码}) 　　}//验证是否登录的接口 　　出口让valiApi=()=比;{ 　　返回axios.post(/验证) 　　} 　　 　　

vuex 　　 　　//src/store.js 　　 　　从“Vue”进口Vue 　　从“Vuex”进口Vuex 　　Vue.use (Vuex) 　　 　　从“进口{loginApi, valiApi}。/api/登录的 　　 　　出口默认新Vuex.Store ({ 　　状态:{ 　　用户名:“” 　　}, 　　突变:{ 　　setusername(状态,有效负载){//改变状态里的用户名 　　状态。用户名=有效载荷 　　} 　　}, 　　行动:{ 　　异步toLogin({},{用户,密码}){ 　　让res=等待loginApi(用户、密码) 　　console.log (res) 　　让{用户名令牌}=res//提交到突变 　　提交(“setusername”,用户名)//令牌具有时效性登录成功把令牌存在本地存储 　　localStorage[“令牌”]=令牌 　　}, 　　异步valiApi({提交}){ 　　const{用户名令牌}=等待valiApi (); 　　提交(“setusername”,用户名); 　　localStorage[“令牌”]=令牌 　　返回用户名!==定义; 　　} 　　} 　　}) 　　

vue +表达+ jwt持久化登录的方法