未登录拦截和登陆后直接跳转到当时想要跳的页面去

最新推荐文章于 2024-05-29 22:10:52 发布

原创最新推荐文章于 2024-05-29 22:10:52 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

vue实战专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在Vue.js应用中实现未登录时的页面拦截，并在登录成功后根据查询参数（query）跳转回原始目标页面。通过打印路由器实例获取query字段，记录用户尝试访问的页面，如center页面。在登录页面成功授权后，利用该信息自动跳转到用户最初的目的地。

原理：运用打印this.router 然后获取里面的query字段
query字段：记录从哪儿跳转来的
（例如：我这里想要跳转到center页面去，但是这个页面需要登录授权才可以跳转过去，没有登录的话就会直接返回登录页面，query字段的话就可以记录到我是从center页面跳转过来的）
可以实现的功能：
应用获取到的query字段，我可以在登录成功后直接跳转到我想去的center页面

this.$router.push(this.$router.query.redierct)

代码如下 我这里路由配置是单独放在一个文件下面
路由写法：

{
        path:'/center',
        component:Center,
        meta:{
            iskey:true
        }
  },

路由拦截：
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import routes from ‘./routes’

Vue.use(VueRouter)//注册路由插件

const router = new VueRouter({
mode: ‘hash’,
base: process.env.BASE_URL,
routes
})
//路由拦截（守卫）
//from是跳转前的路由(从哪儿来)
//to是跳转后的页面路由（到哪儿去
//next是必须要执行的，加上next路由才会跳转（next()允许跳转）

router.beforeEach((to,from,next) => {
   console.log(to)
   if(to.meta.iskey){//to.meta.iskey某几个需要授权的路由
      //判断本地储存中是否有路由
      if(localStorage.getItem('token')){
        next()//有token的话就继续执行
      }else{
        //next('/login')//没有token的话就强制跳转到login页面
        next({
          path:'login',
          query:{redirect:to.fullPath}//redirect自定义的
        })//query:{redirect:to.fullPath}记录从哪儿跳转来的
      }
   }else{
     next()
   }
})
export default router

登录页面：

<template>
    <div>
        login
        <button @click="handLogin">登录</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
        handLogin(){
            setTimeout(() => {
                localStorage.setItem('token','后端返回的token字段')
                //this.$router.back()//back方法   返回到哪儿去
                //获取query字段 打印this.$router
                //console.log(this.$router.query.redierct)
                //登陆了跳转到到当时想要跳的页面去
                this.$router.push(this.$router.query.redierct)
            }, 0);
        }
    }
}
</script>