vue用户在登陆之后，怎么做权限防止用户通过如果url进入一些菜单没有的页面

Question

vue用户在登陆之后，怎么防止用户通过在地址栏输入url 跳转到其他页面呢。比如有abcd四个菜单。现在的权限是后台返回的事abcd的key值，假如后台只是返回了后台的ab，但是实际上cd的路由还是存在于权限表中。怎么防止用户在地址栏输入cd的地址直接访问呢

Answer 1

给你个开箱即用的方案吧，写在 router 里：

  routes: [
    {
      path: "/a",
      component: a,
      meta: { autho: "a" }
    },
    {
      path: "/b",
      component: b,
      meta: { autho: "b" }
    },
  ]
  router.beforeEach((to, from, next) => {
    if (to.meta.autho) {
      // 在这里检查用户是否具备权限，通过就调用 next()，不通过就调用 next(false)
    }
  }

Answer 2

路由 meta 里放权限标识，router.beforeEach 里判断用户有没有相应权限，有权限正常调next()，没权限跳个落地页什么给提示说没权限。

Answer 3

1. 只是界面的话，其实看到也无妨
2. 关键在于后端要禁止用户看到不该看到的东西，执行不该执行的操作
3. 所以不用太投入这里

Answer 4

登录后可以存储一些本地的数据，在beforeEach来观察当前用户跳页面是否有该页面的权限。
当然这东西还是要靠后台来处理的，某些页面的权限不可能只是静态数据，肯定需要后台的服务的，这个时候后台会对该用户的权限进行校验，所以某些接口或者某些按钮的数据就会被禁掉，自然也就渲染不出来了。

Answer 5

1.从后台获取的允许访问的菜单列表储存在vuex或localStorage中
2.在router.js中对需要进行需要校验权限的页面配置meta: { requiresAuth: true }属性
3.接下来在全局路由守卫里做判断，可在main.js中编写钩子函数对路由进行判断，与后台允许访问列表的菜单匹配的路径才可进入。
可参考：https://blog.csdn.net/xyy1234...