vue-router登錄校驗后跳轉到之前指定頁面如何實現


  兩個需求: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 })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM