登录页 export default { data() { return { ruleForm:{ name:"", password:"", }, rules:{ name:[ {required:true,message:"请输入用户名",trigger:'blur'} ], password:[ {required:true,message:"请输入密码",trigger:'blur'} ] } }; }, methods: { submitForm(){ login({ name:this.ruleForm.name, password:this.ruleForm.password }).then((data)=>{//成功 console.log(data); if(data.code==0){ // localStorage.setItem("token",data.data.token) window.location.href="/" } if(data.code==1){ //失败 this.$message.error(data.mes); } }); } } } | | 退出登录会给你弹出一个框出来 export default { name: 'headers', components: {Menus}, computed:{ isLogin(){ return this.$store.getters.isLogin; }, userInfo(){ return this.$store.state.userInfo; } }, methods:{ loginOut(){ this.$confirm("真的要走吗","提示",{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(async ()=>{ const data=await login_out(); //把token里面登录的数据删除 localStorage.removeItem("token"); window.localStorage.href='/'; }) } } } |
| |
使用路由守卫 router.beforeEach(async (to,from,next)=>{ // console.log(to) // console.log(from) // 判断一下是否需要登录 const data = await userInfo(); console.log(data) Store.commit("chnageUserInfo",data.data) if(to.matched.some(item=>item.meta.login)){ // console.log("需要登录"); const token= localStorage.getItem("token"); const isLogin = !!token; if(isLogin){ if(data.errpr===400){ next({name:'login'}); localStorage.removeItem('token'); return; } next(); return; } // 没登录，但是要进入登录页 if(!isLogin && to.name==='login'){ next(); } // 没登录，要进入的页面也不是登录页 if(!isLogin && to.name!=='login'){ next({name:'login'}) } }else{ next(); } }) | |
| |
版权声明：本文为weixin_62223894原创文章，遵循
CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。