VUE3登录后保存token，使用LocalStroge

1.登录成功后，后端会返回一个token。拿到这个token后，使用Localstroge进行保存。代码如下：在login.vue中：

<template><div class="Login"><h1>用户登录</h1><br/><label>用户名：</label><input type="text" v-model="username" placeholder="请输入您的用户名"><br/><label>密码：</label><input type="password" v-model="password" placeholder="请输入您的密码"><br/><button type="button" @click="login">登录</button></div>
</template><script>
import { getLogin } from '@/api/message'
export default{name:'login',data(){return{username:'',password:'',}},mounted(){},methods:{login(){//判断用户名或密码是否为空if(this.username === '' || this.password === ''){alert('用户名和密码不能为空')}else{getLogin({username : this.username,password : this.password,}).then((res) => {//回调信息if(res.code == '200'){alert(res.msg);this.$router.push("/");let token = res.result.token;//console.log(res.result.token);localStorage.setItem("token",token);}})}}}
}
</script>

2.在路由守卫这里，判断token是否存在，只有token存在的时候，才能跳转到内容页。在路由文件index.js里：

//导航守卫、路由守卫、路由拦截
router.beforeEach((to,from,next) =>{//验证token,只有存在token的时候，才能跳转到内容页console.log(to);console.log(from);let token = localStorage.getItem("token");//console.log(token);if(token || to.path === '/login'){next();console.log(token);}else{next("/login");}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！