前端环境登录修改

1、解读登录步骤

（1）在浏览器端使用F12查看vue-admin-template-master登录请求详情 （2）获取请求返回的信息

{"code":20000,"data":{"token":"admin"}}
{"code":20000,"data":{"roles":["admin"],"name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}}

2、实现模拟登录接口

在后端service_edu模块中编写模拟登录的EduloginController

package com.atguigu.eduservice.controller;
import com.atguigu.commonutils.R;
import com.atguigu.eduservice.entity.EduTeacher;
import com.atguigu.eduservice.service.EduTeacherService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Api(description="模拟登陆")
@RestController
@RequestMapping("/eduuser")
public class EduloginController {
    //{"code":20000,"data":{"token":"admin"}}
    @ApiOperation(value = "模拟登陆")
    @PostMapping("login")
    public R login(){
        return R.ok().data("token", "admin");
    }
//{"code":20000,"data":{"roles":["admin"],"name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}}
    @ApiOperation(value = "模拟获取信息")
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles", "admin")
                .data("name","admin")
                .data("avatar","https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/info?token=admin");
    }
}

3、修改前端

（1）修改前端根目录下的cofig目录中的dev.env.js配置文件

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  BASE_API: '"http://localhost:8001"',
})

（2）修改前端根目录下的src目录下的api目录中的login.js文件

import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/eduuser/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

export function getInfo(token) {
  return request({
    url: '/eduuser/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

（3）重启前端

登录页面报network error错误，F12查看控制台信息，可发现如下图中的跨域请求访问问题。 （4）解决跨域访问问题

跨域访问：请求协议、访问ip、端口号，三项有一个不一样就是跨域访问。 在登录EduloginController中添加跨域请求注解

@CrossOrigin //跨域

package com.atguigu.eduservice.controller;
import com.atguigu.commonutils.R;
import com.atguigu.eduservice.entity.EduTeacher;
import com.atguigu.eduservice.service.EduTeacherService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Api(description="模拟登陆")
@CrossOrigin //跨域
@RestController
@RequestMapping("/eduuser")
public class EduloginController {
    //{"code":20000,"data":{"token":"admin"}}
    @ApiOperation(value = "模拟登陆")
    @PostMapping("login")
    public R login(){
        return R.ok().data("token", "admin");
    }
    //{"code":20000,"data":{"roles":["admin"],"name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}}
    @ApiOperation(value = "模拟获取信息")
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles", "admin")
                .data("name","admin")
                .data("avatar","https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/info?token=admin");
    }
}

（5）再次重启前端，可登录进入后台管理页面