vue 页面的权限如何控制？

Question

1.我需要让用户由A页面->B页面->C页面。（有可能C页面需要来至B页面的数据）
2.如果用户输入C页面的地址。我如何控制让用户不能输入？或者说是如何处理避免用户输入C页面？

Answer 1

代码实现
GitHub: vue 动态路由权限管理

思路

用户登录成后，把用户信息保存至localStorage 和 vuex，用addRutes动态添加路由。 然后用 localStorage 和 vuex相结合，解决用户刷新路由无效问题

用户登录
  ↓
  - 成功
    ↓
    - 把用户信息保存至vuex
    - 把用户信息保存至localStorage
    - 用addRutes动态添加路由并跳转至首页
  ↓
  - 失败
    ↓
    - 继续登录

拦截路由变化
  ↓
  - 判断vuex中是否有用户信息
    ↓
    - 有用户信息
      ↓
      - 验证token
        ↓
        - token验证通过
          ↓
          - 跳转路由
        ↓
        - token验证不通过
          ↓
          - 跳转登录页面
    ↓
    - 没有用户信息
      ↓
      - 判断localStorage中是否有用户信息
        ↓
        - 有用户信息
          ↓
          - 验证token
            ↓
            - token验证通过
              ↓
              - 获取localStorage用户信息
                ↓
                - 设置vuex中的用户信息
                ↓
                - 重新设置用户路由
            ↓
            - token验证不通过
              ↓
              - 跳转登录页面
        ↓
        - 没有用户信息
          ↓
          - 跳转登录

Answer 2

可以直接在路由里面可以配置，在/taskmanger里面有三个子页面，在地址栏输入时子页面地址时，就会自动跳转到/taskmanger总页面，就是用redirect：
比如：
{

  path: '/taskmanger',
  redirect:'/taskmanger/strategy'
},{
  path: '/taskmanger',
  component: taskmanger,
  children: [
    {
      path: 'strategy',
      component: strategy
    },
    {
      path: 'manger',
      component: manger
    },
    {
      path: 'history',
      component: history
    }
  ]

Answer 3

很多种方法

总的来讲，页面访问权限的控制，判断条件可以存储在多种不同的媒介中，有：路由参数，localstroage，vuex
限制访问的手段，就是用vue路由的编程式路由就行了，形如this.$router.push({name:'xxx'})这样。

你ABC三个页面，每个页面需要什么样的权限，由上一个页面的操作中提供，然后传到我之前讲的三种判断条件的存储媒介中，到下一个页面，从媒介中拿下来，进行判断就行了，如果不符合条件，就跳转到默认页面。

Answer 4

这不单单是一个简单的权限问题了，应该是一个访问层级的问题，有A再有B，有B再有C的概念。

解决方式：
建立当前路由的JS对象面包序，当进到C，或B页面时间，判断前路序是否在面包序中，不在就无权访问。
正常形式：
{path:'A',path2:'B',path3:'C'}

Answer 5

如果是单页面的话 可以结合Vuex 控制下 如果没有拿到B页面的数据就在Vuex中体现出来 c 去拿这个值就可以做判断了。

Answer 6

采用多页面跳转，而不是单页面路由。权限做后台拦截即可。有个原则是不信任前台，无论是参数校验，权限，加密等都不要依赖前台，不要信任前台。

Answer 7

在vuex中配置一个判断条件，比如abcPermission: 'a',在b组件的created(或者其他的)钩子中判断这个值是否为‘a’,不是就重定向到a组件，是就进入然后把值改为b，c组件同理

Answer 8

使用 addRouters 已经用 vue-cli3 + ts + mock 实现了对应的代码 http://xiangjv.top/indexDetai...
有源码 有兴趣可以看一下