addrouter的第二种解决办法

// 路由拦截
// import router from './index'
import { staticRoutes, dataRoutes } from './index'
import store from '../store'
import {
  getToken
} from '@/utils/auth' // 验权
import 'nprogress/nprogress.css' // 进度条
import NProgress from 'nprogress' // 进度调样式
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let router = new Router({ routes: staticRoutes })
NProgress.configure({
  showSpinner: false
})
router.beforeEach((to, from, next) => {
  NProgress.start()
  store.commit('CHANGE_TITLE', to.meta.title)
  // console.log(1)
  if (getToken()) {
    // 在token存在时在进行加载下秒的内容，不能用store.state.user.token因为他回去请求getToken(),
    // 由于加载的时间限制会导致store.state.user.token为空，进而导致走else的内容，使第一次动态加载为空，导致第二次刷新才能解决
    if (to.path === '/login') {
      next()
    } else {
      // next()
      // console.log(2)
      if (!store.state.user.id) { // 当id为空时进行加载，也有预防刷新消失的功能
        // 只能运行一次
        store.dispatch('Change', 'qwe') // 改变id使以后不在加载
        // console.log(3)
        // dataRoutes.map(function (value) {
        //   if (value.role === sessionStorage.getItem('router')) {
        //     router.addRoutes(value.roleRoutes)
        //   }
        // })
        next({ ...to, replace: true })
        // console.log(4)
      } else {
        // console.log(5)
        // console.log(getToken(), router)
        next()
      }
    }
  } else {
    // console.log(6)
    next()
    // router.push({path:'/login'})
    NProgress.done()
  }

  // if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要登录权限
  //   if (getToken()) { // 判断token是否存在
  //     next()
  //   } else {
  //     router.push({
  //       path: '/login'
  //     })
  //   }
  // } else if (to.path === '/login') {
  //   next()
  // } else {
  //   next()
  //   NProgress.done()
  // }
})

router.afterEach(() => {
  NProgress.done()
})

export default router

app.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
import{serchMangerList} from '@/api/dictionary'
import { staticRoutes, dataRoutes } from '@/router/index'
export default {
  name: 'App',
  mounted(){
    this.search()
    if(sessionStorage.getItem('userID')){
       this.$store.commit('SET_USERID', sessionStorage.getItem('userID'));
    }
    if(sessionStorage.getItem('router')) {
      const _this = this
      dataRoutes.map(function (value) {
          if (value.role === sessionStorage.getItem('router')) {
            _this.$router.addRoutes(value.roleRoutes)
          }
        })

    }

  },
  methods:{
    search(){
      serchMangerList().then(res=>{
        if(res){
          this.$store.commit('SET_DICTIONRY', res)
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>

<style>
/* #app {
  margin-top: 60px;
} */
</style>



login.vue

mport { validatePhoneUser, validatePassword } from "@/utils/validate"
import { staticRoutes, dataRoutes } from '@/router/index'
import { login } from "@/api/login"
import {obtain,codevalidation} from '@/api/login'
import { setToken} from '@/utils/auth'
// import request from '@/utils/request'
export default {
  // name: 'login',
  components: {
  },
  data() {
    const identifyingCodeLegal = (rule, value, callback) => {
      if (value) {
        if (value.length === 4) {
          callback()
        } else {
          callback(new Error("请输入正确验证码"))
        }
      } else {
        callback(new Error("请输入验证码"))
      }
    }
    // 用户账号规则校验
    const accountCodeLegal = (rule, value, callback) => {
      if (!value || value === "") {
        callback(new Error("请输入手机号码/邮箱地址/用户名"))
      } else {
        callback()
      }
    }
    // 手机号规则校验
    const accountCodePhone = (rule, value, callback) => {
      if (value) {
        if (!validatePhoneUser(value)) {
          callback(new Error("请输入正确的手机号"))
        } else {
          callback()
        }
      } else {
        callback(new Error("请输入手机号码"))
      }
    }
    // 密码规则验证
    const passwordLegal = (rule, value, callback) => {
      if (!value || value === "") {
        callback(new Error("请输入密码"))
      } else {
        callback()
      }
    }
    return {
      img: '',
      loginInfo: {
        username: "",
        password: "",
        code: '',
        token: ''
      },
      loginInfoRules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ validator: passwordLegal, trigger: "blur" }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.obtionlist()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleClick() {},
    hand() {
      window.open("http://www.baidu.com")
    },
    // 用户登录
    handleLogin(nameForm) {
      this.$refs[nameForm].validate(valid => {
        // 数据传递的规则验证
        if (valid) {
          let smt= dataRoutes;
          // const _this=this;
          // const data={
          //   username:this.loginInfo.username,
          //   password:this.loginInfo.password
          // };
          // console.log(data)
          codevalidation({code:this.loginInfo.code,token:this.loginInfo.token}).then(res=>{
            if(res.status==200){
                 login(this.loginInfo).then(res=>{
                  if(res.jwtToken) {
                    setToken(res.jwtToken)
                    // setID(res.result.id)
                    sessionStorage.setItem("userID", res.result.id);
                    sessionStorage.setItem("router", res.result.role);
                    this.$store.commit('SET_ID','');
                    this.$store.commit('SET_USERID', res.result.id);
                    //  console.log(this.$store.state.user.id,'id')
                    const rolelist =['PersonalSocialWorker','CityAssociation','DistrictAssociation','EducationalServices',  'SocialWorkOrganization']
                     const _this = this
                     dataRoutes.map(function (value) {
                      if (value.role === res.result.role) {
                        _this.$router.addRoutes(value.roleRoutes)
                      }
                    })
                    if(rolelist.indexOf(res.result.role) == -1){
                      this.$message.error('你没有登录权限')
                    }else{
                      if(res.result.role == "PersonalSocialWorker") {
                      this.$router.push("/education1")
                      }else{
                        this.$router.push("/education")
                      }
                    }

                  }else{
                    this.$message.error('登录失败')
                  }


                }).catch(err=>{
                  console.log(err)
                })
            }else{
              this.$message.error(res.data)
            }
          }).catch(err=>{
            console.log(err)
          })

        } else {
          return false
        }
      })
    },
    forgetPassword() {
      this.$router.push("/forgetPassword")
    },
     obtionlist () {
      obtain().then(res=>{
        if(res){
          this.img='data:image/jpeg;base64,'+ res.img;
          this.loginInfo.token=res.token;
        }

      }).catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>