vue路由权限的一些处理

我这边遇到的大致分以下几种情况，
1需要登录后才能访问；
2登录用户分权限，根据角色id不同分配不同的菜单路由，比如分管理员和用户两种权限；管理员有更高的菜单权限
3禁止手动输入path进入页面

第一种情况的处理

登录成功后后台会返回一个token存入vuex，当token过期或者没有token时在页面请求接口会返回401状态码，在request封装文件获取到后执行登出并进入登录界面。

request.interceptors.response.use(
  response => {
    // 错误统一拦截
    if (parseInt(response.data.status) === 401) {
      store.commit(LOGIN_OUT)
      new Vue().$Message.error({
        content: '登录已过期，请重新登录',
        onClose: () => {
          Router.push({
            name: 'index'
          })
        }
      })
      return Promise.reject(response.data.msg)
    }
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

第二种情况的处理

有多种处理方法，我这边是分配菜单权限，登录接口给到的不同角色不同的菜单，并渲染到界面。菜单格式大致如下

menus: [
        {
          name: "dataAnalysis",
          title: "数据统计",
          icon: "md-school",
          id: "0",
          submenu: [
            {
              name: "schoolData",
              title: "学校数据",
              icon: "",
              id: "0",
              path: "/home/analysis/school",
            },
          ],
        },
]

对于一些重要的界面，要做权限处理，比如只有管理员可以进入的，防止用户手动输入路由进入界面

  beforeRouteEnter(to, from, next) {
    let roleId = store.state.user.user.role_id  //从我存入store的数据中获取当前用户的角色id
    if (roleId != 1) {  //用户不是管理员，则进入404页面
      next({
        path: "/404",
      }); //跳到404页面
    }else {
      next(); //放行
    }
  },