解决不合时宜的路由 404 状况

在作后台管理系统的过程当中，遇到一个问题，404 页面会不合时宜地出现：

用户直接输入 url 访问，出现 404 页面

这是一个比较糟糕的状况，用户点开一个连接，进去就是 404 ，用户体验很很差。所以对这个问题进行了分析解决。

其中的关键点是，这是一个后台管理系统，路由是前端根据当前用户角色动态生成的，须要控制使其不能访问其没有权限访问的页面

指望解决方案：

• 若是用户没有登陆过，跳转至登陆页面，登陆后再跳至指定页面
• 用户已登陆，则根据其权限判断是到指定页面仍是首页

分析思路：

404 是当用户访问路由表里没有设置的路径时出现的页面，因此，在路由导航钩子函数里判断目的路径进行重定向便可

解决方法：

一、针对用户打开新的浏览器窗口输入的状况（即未登陆），跳转至登陆页

这里根据当前是否保存有动态计算的路由数组进行判断，也能够根据有无 token 判断

router.beforeEach(async (to, from, next) => {
  if (from.path === '/' && !util.cookies.get('savedRouteList')) {
    next({
      name: 'login',
      query: {
        redirect: to.fullPath
      }
    })
  }
}

二、针对用户已登陆系统，浏览器新开 Tab 标签输入 url 的状况

这里根据目标路由是否存在于路由表中进行判断，即只需判断目的路由是否 404 页面，已存在的路由会直接访问，无需操做

router.beforeEach(async (to, from, next) => {
  // 这里不用 from.path 进行判断
  // 由于浏览器先访问目标页面，若是其不存在，再转到 404 页面，则 from.path 变成了目标页面的路径
  if (from.name === null && to.name === 'notFound') {
      this.$message.warning('您没有权限访问当前页面，已为您重定向至首页')
      const firstAccessedRoute = store.state.d2admin.user.accessedRouters[0].children[0].name
      // 访问当前权限路由中第一个路由，若是为空则回到登陆页
      next ({
        name: firstAccessedRoute || 'login'
      })
    }
}

---

完整代码：

router.beforeEach(async (to, from, next) => {
  if (from.path === '/' && !util.cookies.get('savedRouteList')) {
      next ({
        name: 'login',
        query: {
            redirect: to.fullPath
        }
      })
    }
    if (from.name === null && to.name === 'notFound') {
      this.$message.warning('您没有权限访问当前页面，已为您重定向至首页')
      const firstAccessedRoute = store.state.d2admin.user.accessedRouters[0].children[0].name
      next ({
        name: firstAccessedRoute || 'login'
      })
    }
}