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