vue 页面的权限如何控制?

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

回答:

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

思路

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

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

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

回答:

可以直接在路由里面可以配置,在/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
    }
  ]

回答:

很多种方法

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

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

回答:

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

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

回答:

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

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注