权限控制--动态生成路由

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

流程

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

重点：动态生成路由

1 前端页面创建

创建登录页面并设置路由

创建登录页面完成用户登录界面 在views下创建LoginView,vue登录页

<template>
  <div>
    <h1>我是登录页面</h1>
    用户名：<input type="text"/>
    密码：<input type="text"/>
    <button>点我登录</button>
  </div>
</template>
​
<script>
export default {
​
}
</script>
​
<style>
​
</style>

配置登录页路由规则

配置登录页路由规则 在router下的index.js配置路由规则

import Vue from 'vue'
import VueRouter from 'vue-router'
​
​
Vue.use(VueRouter)
​
const routes = [
​
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/LoginView.vue')
  },
  {
    path:"/",
    redirect:"/login"
  }
]
​
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
​
export default router
​

创建首页 并配置路由规则

在views下创建首页 并配置路由规则

<template>
  <div>
    我是首页
  </div>
</template>
​
<script>
export default {
​
}
</script>
​
<style>
​
</style>

import Vue from 'vue'
import VueRouter from 'vue-router'
​
​
Vue.use(VueRouter)
​
const routes = [
​
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/LoginView.vue')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/HomeView.vue')
  },
  {
    path:"/",
    redirect:"/login"
  }
]
​
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
​
export default router
​

根据前期的项目的原型设计 创建不同用户权限的页面

原型设计工具 墨刀 蓝湖 墨客

在views下创建不同权限用户的所有页面

<template>
    <div>
      我是管理员的--用户管理页面
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style scoped>
  div{
      width: 100%;
      height: 500px;
      background-color: rgb(156, 0, 133);
  }
</style>

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

接口是模拟的 密码不限制 只限制了 用户名进行测试

接口地址:http://localhost:8899/login

参数:uname admin:管理员 user:普通用户

方式get

返回值：

userid ： 1普通用户 0 管理员 -1登录失败

<template>
  <div>
    <h1>我是登录页面</h1>
    用户名：<input type="text" v-model="inputa" /> 密码：<input
      type="text"
      v-model="inputb"
    />
    <button @click="fun()">点我登录</button>
  </div>
</template>
​
<script>
import $http from "axios";
export default {
  data() {
    return {
      inputa: "",
      inputb: "",
    };
  },
  methods: {
    fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(ok);
      });
    },
  },
};
</script>
​
<style>
</style>

3.判断用户是否登陆成功

 fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(ok);
        // 判断是否登录成功
        if(ok.data.userid!=-1){
          alert("欢迎您"+ok.data.msg)
        }else{
          alert("用户名密码错误请重新登录")
        }
      });
    },

4 使用this.$router.addRoutes()动态添加路由

在Login页面登陆成功之后 可以得到后台返回的路由信息 那么我们就使用addRoutes来进行动态添加路由

fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(ok);
        // 判断是否登录成功
        if(ok.data.userid!=-1){
          alert("欢迎您"+ok.data.msg)
          // 在登陆成功的时候使用addRoutes添加动态路由
          this.$router.addRoutes([
            {
              path:"/home",
              name:"hone",
              // 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
              component:Home,
              children:[]//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
            }
          ])
        }else{
          alert("用户名密码错误请重新登录")
        }
      });
    },

5处理后台返回的数据并动态生成路由

因为后台返回的数据 和我们在vue中使用的路由规则格式不匹配 所以我们需要处理他 但是不要忘了 把处理好的数据要放到addRoutes生成的二级路由中

fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(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}`)
          })
        }

        // 把children变量放到addRoutes生成的二级路由规则中
        // 处理路由数据


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

6缓存路由信息并且动态生成路由导航

缓存数据

 fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(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}`)
          })
        }

        // 把children变量放到addRoutes生成的二级路由规则中
        // 处理路由数据

        // 缓存后台请求的路由数据方便动态生成导航
        window.sessionStorage.setItem("link",JSON.stringify(ok.data.routerdata))
        // 缓存后台请求的路由数据方便动态生成导航


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

在home页面生成二级路由导航 与设置二级路由出口

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

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

<style>

</style>

在登录页面请求完成后跳转到home页面

fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(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}`)
          })
        }
     
        // 把children变量放到addRoutes生成的二级路由规则中
        // 处理路由数据

        // 缓存后台请求的路由数据方便动态生成导航
        window.sessionStorage.setItem("link",JSON.stringify(ok.data.routerdata))
        // 缓存后台请求的路由数据方便动态生成导航


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