权限--addRoutes动态生成路由

权限：根据不同身份，访问到的页面不一样。

在后台管理项目中 我们经常会根据不同的用户权限 来动态生成不同的路由导航 以达到权限控制（不同权限生成的路由导航不同）

流程：用户在登录页面输入账号密码====>后端接收判断用户权限====>后端根据不同的用户权限返回对应的导航数据====>前端生成对应的路由导航

   1.  前端页面创建

import Vue from 'vue'
import VueRouter from 'vue-router'
import No from '@/views/No.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/LoginView.vue')
  },
  {
    path:'/',
    redirect:"/login"
  },
  {
    path:"*",
    name:"404",
    component:No

  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

  我只把路由配置展示出来，其他页面的就不展示了

2.登录请求后台 得到不同权限的用户数据

<template>
  <div>
    <h1>用户登录</h1>
      用户名：<input type="text" v-model="text" /> 
      密码：<input type="text" v-model="text1" />
    <button @click="fun">登录</button>
  </div>
</template>

<script>
import Home from "../views/HomeView.vue"
import {link} from "../api/index"
export default {
  data() {
    return {
      text: "",
      text1: "",
    };
  },
  methods: {
    fun() {
      link({uname: this.text,upwd:this.text1}).then((ok)=>{
      // 处理路由数据
      let children=[];
      // 遍历后台数据  生成我们的路由规则
      for(var i=0;i<ok.data.routerdata.length;i++){
          // 这里要先读取  否则在下面得路由拦截在中就没有办法获取了
          let routerdata=ok.data.routerdata[i]
          children.push({
            path:routerdata.path,
            name:routerdata.name,
            component: () => import(`@/views/${routerdata.demo}`)
          })
        }

        
     //将从后端获取的数据保存在本地存储
      window.sessionStorage.setItem("link",JSON.stringify(ok.data.routerdata))

    //判断用户是否登陆成功
     if (ok.data.userid != -1) {
          alert("欢迎您" + ok.data.msg);
     //使用this.$router.addRoutes()动态添加路由
           this.$router.addRoutes([
            {
              path:"/home",
              name:"home",
              // 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
              component:Home,
              children:children//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
            }
            ])
   //跳转到home页面
          this.$router.push("/home")
        } else {
          alert("用户名密码错误请重新登录");
        }   
      })
      
    
    },
  },
};
</script>

<style>
</style>

3 home页面 

<template>
  <div>
    我是home页面
    <!-- 根据数据遍历生成导航 -->
    <router-link v-for="(v, i) in routerdata" :key="i" :to="'/home/' + v.path"
      >{{ v.name }}
    </router-link>
   <!-- 设置路由出口 -->
    <router-view />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      routerdata: "",
    };
  },
 
  mounted() {
    // 把得到的路由规则转换之后传递给data数据
    this.routerdata = JSON.parse(window.sessionStorage.getItem("link"));
  },
};
</script>

<style>
</style>