登录时遇到的问题 一

学生和老师的页面不能随便就通过地址栏进行切换 需要设置动态路由 addRoutes

遇到的问题 后端传来的routes中的component的值是一个字符串 怎么根据这个字符穿找到相应的组件

解决的办法是在components中创建一个index.js文件这个文件的配置

import Student from "../views/Student.vue"
import Teacher from "../views/Teacher.vue"


export default {

    student: Student,
    teacher: Teacher


}

还需要在router中的index,js中配置一下路由  页面刷新会进入到登录的页面

{
    path: '/',
    name: 'login',
    component: Login
  },


 {
    path: "*",
    redirect: {
      path: '/'
    }
  },

数据请求完以后需要跳转之前需要进行addRoutes的操作  首先引入componets包含index.js这个文件包含组件 对接受过来的routes进行map的操作使原来的component中的字符串变成组件

import components from "../components";

 this.$router.addRoutes(
              data.routes.map(item => {
                item.component = components[item.component];
                return item;
              })
            );
            this.$router.push(data.routes[0].path);

 

登录遇到的问题二

怎么解决跨域问题 发起请求的网站时http://localhost:8080  而返回数据的网站时http://localhost:3000

这个时候就需要进行反向代理解决跨域，proxy里面的'/api'会把http://localhost:8080伪装成http://localhost:3000从而请求到数据

在文件的根目录中创建一个文件vue.config.js

module.exports = {
publicPath: "./",
assetsDir: "static",
outputDir: 'dist',
lintOnSave: false,
 
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite:{
'^/api' : ''
}
},
'/foo': {
target: '<other_url>'
}
}
}
};

 

 

 

登录的组件

<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input type="text" v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userpwd">
      <el-input type="password" v-model="ruleForm.userpwd"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">登录</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

组件对应的数据和方法

<script>
import userModel from "../model/userModel";
import components from "../components";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        userpwd: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            pattern: /^[a-z_$][a-z0-9_$]{3,9}$/i,
            message: "只能是数字字母_$组成不能以数字开头长度4到10位",
            trigger: "blur"
          }
        ],
        userpwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern: /^[a-z0-9]{6,10}$/i,
            message: "只能是数字字母组成长度6到10位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        //表单验证成功 才进行数据请求  去连接接口
        if (valid) {
          // console.log(this.ruleForm);
          //掉接口  看是否成功
          let { data } = await userModel.login({
            username: this.ruleForm.username,
            userpwd: this.ruleForm.userpwd
          });
          if (data.code == 1) {
            let token = data.token;
            window.localStorage.setItem("token", token);
            //跳转页面
            // this.$router.push("/" + data.path);
            console.log(data);
            console.log(this.$router);
            console.log(this.$router.addRoutes);
            this.$router.addRoutes(
              data.routes.map(item => {
                item.component = components[item.component];
                return item;
              })
            );
            this.$router.push(data.routes[0].path);
          } else {
            alert(data.msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    }
  }
};
</script>

登录组件对应使用的接口,在url中加入/api  进行伪装

import axios from "./axios"
export default {
    login: (data) => {
        return axios({
            method: "post",
            url: "/api/users/login",
            data
        })
    }
}