vue-router登录校验后跳转到之前指定页面如何实现
Vue 实现 如何 页面 登录 指定 跳转 校验
2023-09-11 14:19:55 时间
两个需求:1、用户点击购买需要下单,并跳转到订单页面,但是如果用户没有登录的话,中间有登录验证,会拦截;2、点击购买的时候,登录校验成功了,跳转到订单页面时,订单已创建,去付款即可。3、处理拦截至登录页,然后点去注册页,完善信息页,再回登录页,再登录进去,依然进去目标order页
一、解决方案对1:
大概思路:1、当你想进入 http://localhost:8080/order
(该页面需要登录授权),2、检查是否登录,如果没有登录就跳转到登录页,需要将上一页的path(‘/order’)作为query存到login页地址中,如:http://localhost:8080/login?redirect=%2Forder
router.beforeEach((to, from ,next) => {
const token = store.getters.userInfo
if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){
//路由元信息requireAuth:true,或者homePages:true,则不做登录校验
next()
}else{
if(token){//判断用户是否登录
if(Object.keys(from.query).length === 0){//判断路由来源是否有query,处理不是目的跳转的情况
next()
}else{
let redirect = from.query.redirect//如果来源路由有query
if(to.path === redirect){//这行是解决next无限循环的问题
next()
}else{
next({path:redirect})//跳转到目的路由
}
}
}else{
if(to.path==="/login"){
next()
}else{
next({
path:"/login",
query: {redirect: to.fullPath}//将目的路由地址存入login的query中
})
}
}
}
return
})
二、解决方案对2:
order有2种情况进入,一种直接点击,一种就是上面的跳转,跳转需要传入选取订单的id,用来创建订单。
大致思路:1、建立2种路由跳转指向同一个组件;2、通过不同路由路径,在组件内生命周期,执行不同的操作
{
path:'/order',
name:'order',
component:() => import('@/views/system/order')
},
{
path:'/order/:id',
name:'order',
component:() => import('@/views/system/order')
}
mounted(){
let _id = this.$route.params.id//看是那种跳转路径
if(!_id){
this.fetchData()
}else{
orderFromHomeApi(_id).then(res => {
if(res.status === 200){
this.fetchData()
}
})
}
}
三、解决方案对3:
router.beforeEach((to, from ,next) => {
const token = store.getters.userInfo
if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){
//处理拦截至登录页,然后点去注册页,完善信息页,再回登录页,再登录进去,依然进去目标order页
if(Object.keys(from.query).length === 0){//不是这种目标拦截的情况(就from.query是空对象)直接next()
next()
}else{
let redirect = from.query.redirect//是目标拦截的情况,记录redirect
if(to.path === redirect){//这个是处理无限循环的问题
next()
}else{
if(Object.keys(to.query).length > 0){//加上query之后,就判断它有了query,就next()跳转进去
next()
}else{//第一次跳转to路由是没有query的,我们需要加上query来记录我们需要的目标路由
next({
path:to.path,
query: {redirect: redirect}
})
}
}
}
}else{
if(token){
if(Object.keys(from.query).length === 0){
next()
}else{
let redirect = from.query.redirect
if(to.path === redirect){
next()
}else{
next({path:redirect})
}
}
}else{
if(to.path==="/login"){
next()
}else{
next({
path:"/login",
query: {redirect: to.fullPath}
})
}
}
}
return
})
相关文章
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Vue】Vue3脚手架使用font-awesome字体图标的解决方案
- 【Vue】Vue中【爷组件】与【子组件】通过【父组件】参数相互调用方法(props方式,图文+代码示例)
- 【Vue】Vue中“插件”的调用方法
- Vue - 实现点击按钮(笔图标)可编辑 input 输入框(点击文字内容后变成 <input> 输入框同时能修改和取消、删除)
- Vue - 实现多选功能,点击选中并高亮显示效果(支持全选 / 反选,以及轻松的 “回显“ 数据)适用于商品、自定义卡片、标签的多选功能,选中多个选项,并且使其高亮,详细教程功能源码,干净整洁开箱即用
- JavaScript - Vue / React 实现网页标题文字滚动效果,在浏览器标题栏页签选项卡上进行滚动的特效(详细示例源代码)前端所有技术栈通用,适用于任何前端项目!
- Vue vue-awesome-swiper 的坑
- vue中v-if和v-for的区别是什么
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue如何实现实时监听页面宽度高度变化
- Vue中如何实现将表格导出Excel
- vue实战入门进阶篇四:vue+elementui实现网站后台-主页框架实现
- vue学习笔记三:Jquery VS Vue之差异比较概览
- vue-router4之路由的跳转
- Vue组件基础知识总结
- Vue实战第1章:学习和使用vue-router
- 详解Vue中的虚拟DOM
- SpringBoot+Vue实现的仿小米电子产品售卖商城系统 附带详细运行指导视频
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- vue实现密码显示隐藏、很简单易懂
- vue 如何实现多页面应用
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- Element + Vue I18n动态import加载国际化语言包翻译文件