企业微信重新登录进入index不刷新当前页面数据

前要： 企业微信根据不同的职位分配不同的权限，如果是每一个用户直接企业微信单点登录进去可以获取到对应自己的权限，可以看到对应的模块！那么问题来了，如何用户单点登录进来退出登录重新用其他账号登录的话，index中的权限模块的数据还是第一次单点登录进去的权限，必须要点击企业微信三点里面的刷新才能重新获取账号登录对应的权限！

历史余留BUG: 一开始因为需要配置的权限是后台返回来的配置根据对应后台填写的标识来分配权限的，有meas和button两种权限标识，按钮权限是感觉父类来查询对应的子类按钮权限的！所以需要配置app.vue的路由缓存！

 <div id="app">
    <!-- <router-view></router-view> -->
    <!-- $route.meta.keepAlive  对页面进行缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" v-wechat-title="$route.meta.title"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" v-wechat-title="$route.meta.title"></router-view>
  </div>
1
2
3
4
5
6
7
8

思路配置方案：

1、强制刷新index页面栈
该方法可以强制刷新页面栈，但是会出现一段空白页，用户体验不好

this.$router.go(0)
1

app.vue中定义reload()

<template>
  <div id="app">
    <router-view v-if="isReload"/>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isReload: true
    }
  },
  methods: {
    reload() {
      this.isReload = false
      this.$nextTick(() => {
        this.isReload = true
      })
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

需要强制刷新的页面引用

<script>
export default {
  inject: ['reload'],
  methods: {
    clickReload() { // 点击之后强制刷新
       this.reload()
     }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10

2、路由拦截时进行对应的栈刷新处理

3.简单粗暴的activated​

其实vue中海油一个钩子函数，只是很少用，这钩子函数不关你有没有缓存，就是每一次进入改页面栈的时候都会刷新，重新加载当前页面栈的！

如果使用的是created钩子函数的话，前面进来可以触发改钩子函数，但是如果回退在进入改页面栈的时候就不会重新触发固态钩子函数的，因为在你完成登录操作之前，你的首页组件就已经被挂载了，相当于已经执行到了mounted钩子了。你试试update，应该可以解决问题。

activated(){
    //动态加载权限模块
    this.controller();
  },
1
2
3
4

哈哈​！这进可攻，退可守，不失男人本色​！！！​