【前端】禁止页面非法路由进入、手动修改路由跳转、页面跳步访问等情况的实现

0 场景

有多个vue编写的连续h5页面，要求用户按序访问，不能跳步访问，不能直接通过路由修改进入某一页面，不能输入不存在的页面来访问

---

1 实现思路

1.1 访问首页，ok
1.2 直接跳转到非首页，重定向到首页并携带参数
1.3 正常页面跳转，通过sessionStorage存储路由历史，进行比对，验证是否按序前进或后退

---

2 代码实现

main.js引入

// main.js
import './permission'

核心代码permission.js

// permission.js
import router from './router'; // 引入路由文件 

// 路由拦截处理
router.beforeEach((to, from, next)=>{
  let routerList = JSOON.parse(sessionStorage.getItem('routerList'));
  // 1 访问首页，则放过
  if(to.path === '/home'){
    return next();
  }
  // 2 禁止直接跳转到非首页，并携带请求参数
  if(from.path === '/' && !sessionStorage.getItem('currentRoute')){
    return router.push({path:'/Home',query:{...to.query}}).catch(err=>{})
  }
  // 3 正常页面跳转
  else{
    // 3.1 按步骤前进，就近修改标志位，添加路由列表记录
    if(sessionStorage.getItem('currentRoute') == to.meta.currentRoute){
      routerList.indexOf(to,meta.currentRoute) == -1 && routerList.push(to.meta.currentRoute)
      sessionStorage.setItem('routerList',JSON.stringify([...routerList]))
      if(to.query.id){
        return next()
      }
      if(from.query.id){
        return router.push({path:to.path,query:{id:from.query.id,...to.query}}).catch(err=>{})
      }else{
        return next()
      }
    }
    // 3.2 按步骤回退
    if(to.meta.currentRoute == routerList.slice(-2,-1)){
      sessionStorage.setItem('currentRoute', to.meta.currentRoute)
      routerList.pop()
      sessionStorage.setItem('routerList', JSON.stringify([...routerList]))
      return next()
    }
    next({path:'',replace:true})
  }
})

router文件anyoneRouter.js中

// anyoneRouter.js
export default [
  {
    ...
  },
  {
    path: '...',
    name: '...',
    component: ...,
    meta: {
      title: '...',
      currentRoute: 'CurrentRoute',
      goRoute1: 'GoRouteOne',
      goRoute2: 'GoRouteTwo'
    }
  },
  {
    ...
  }
]

页面SomePage.vue中

// SomePage.vue
...
let path = this.path ? '/SomeRoute' : '/ElseRoute'
let goRoute = this.goRoute ? 'goRoute1' : 'goRoute2'
sessionStorage.setItem('currentRoute', thie.$route.meta[goRoute])
this.$router.push(path)
...