使用路由守卫来写登录效果

美食杰项目的登录效果

1.使用element-ui写样式

<template><div class="login-section"><!-- :rules="rules" --><el-formlabel-position="top"label-width="100px" class="demo-ruleForm":model="ruleForm":rules="rules"><el-form-item label="用户名" prop="name"><el-input type="text" v-model="ruleForm.name" placeholder="输入你的用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="ruleForm.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm()">提交</el-button><el-button>重置</el-button></el-form-item></el-form></div>
</template>

2.在路由index文件中添加路由守卫并配置

router.beforeEach(async(to,from,next)=>{const data = await userInfo();if(to.matched.some(item=> item.meta.login)){const token=localStorage.getItem("token");const isLogin = !!token;if(isLogin){if(data.error === 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(); }
})

3.在写登录页的vue模块中添加跳转登录按钮事件并传入值

import {login} from '@/service/api';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)=>{if(data.code == 0){localStorage.setItem("token",data.data.token);window.location.href='/';}if(data.code == 1){this.$message.error(data.mes);  }});}}
}

使用路由守卫来写登录效果相关推荐

P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态文章目录 P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态 1.概述 2.mock接口返回token 2.1.mock ...
Vue路由守卫实现无登录只跳转到登录页面
在实际的项目中,有一些页面是需要登录后才可以浏览,有一些功能需要登录权限.如果没限制用户未登录也可以通过url直接浏览,这需要我们路由上做一些限制. 在登录成功后,后端会返回一个唯一token,我们可 ...
全局路由守卫和局部路由守卫
全局路由守卫和局部路由守卫今日有童鞋问我全局的路由守卫怎默写我直接细心地教了教他,现在我更新一下博客里面的全局路由守卫和单个的路由守卫希望对你们有所帮助! 注(我的数据是保存到vuex里面的) 此 ...
VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
路由守卫-vue切换路由登录判断、条件判断
在vue项目中,切换路由时肯定会碰到需要登录的路由,其原理就是在切换路径之前进行判断,你不可能进入页面再去判断有无登录重新定向到login,那样的话会导致页面已经渲染以及它的各种请求已经发出. 一.如 ...
路由守卫（登录_vue3）
路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作. 类似于组件生命周期钩子函数 . 可以监控所有的路由跳转,并做一些相应的操作实现功能: 不管你在哪个页面,只要没 ...
路由守卫的简单使用-登录功能
在用户进入我们系统的时候,需要验证是否已经登录,再来进行相应的跳转.如果使用传统的方式来逐一进行判断验证,是极为麻烦的,于是有了路由守卫,话不多说,直接上代码: 1.login.vue登录界面因为时 ...
vue用路由守卫进行登录后的路由跳转
昨天已经成功地获取到登录的token,并将token存储在session storage中,今天完成了获取到token之前与之后内容页与登录页之间的路由跳转,主要用路由守卫来实现在 router/i ...
创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...

使用路由守卫来写登录效果

使用路由守卫来写登录效果相关推荐

最新文章

热门文章