权限控制-动态生产路由（二）

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("用户名密码错误请重新登录")
        }
      });
    },