项目中经常会有这样的需求:刚进入页面时获取用户权限,然后控制其他页面某些元素的显示(比如管理员权限会显示管理的tab。普通用户则不显示)。这个获取的权限可能会在很多页面中用到,如果存成全局的就比较方便了。

试过几种方法:

    1、请求成功后存在Vue.prototype.XXX

    2、请求成功后存在localstorage中

但是以上两种方法不能实现,因为请求是异步的,页面初始化用到这个值时请求还未完成,并且值更新后不会绑定到页面中。

因为只有一个变量,要使用vuex有点浪费了。

后来找到一种方法,将值存在根节点中,这样子组件就都能用到这个值了,值更新后也能实时渲染:

首先我们在根节点中初始化这个值:

var obj = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  data () {
    return {
      userRole: ''    //初始化userRole
    }
  }
})

然后在请求成功后更新这个值

axios('api/msg/getUserRole').then(data => {
  obj.$data.userRole = data.userRole
})

然后在子组件中通过$root.$data.userRole拿到这个值。

就可以啦!!!



Logo

前往低代码交流专区

更多推荐