vue_element-admin整合SpringBoot实现登录

SpringBoot实现vue-admin-template登录接口

vue-admin-template

vue-admin-template是一个简化版的vue-element-admin的模板，
适合vue用来做项目的搭建，虽然官方文档以及花裤衩前端大佬
在博客中已经将大部分的疑难杂症解决了，但当完全自己搭建的
时候才发现多折腾

vue-admin-template登录接口请求详解

要想搞懂一个接口，最好的方式就是
1.去看接口的定义声明的参数
2.发送请求查看返回的数据格式

开始

1.先配置跨域等基础信息
在目录中找到.env.development文件修改BASE_URL

# just a flag
ENV = 'development'

# base api 此处修改为空
VUE_APP_BASE_API = ''

2.配置跨域
找到vue.config.js,在配置文件中修改端口等信息

 proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:10000`,
        secure: false, // 如果是https接口，需要配置这个参数为true
        changeOrigin: true,	//必须为true，true表示跨域
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    //此处注释掉
    //before: require('./mock/mock-server.js')
  }

3.查看api中的user.js，查看登录、获取信息等信息
此处可以不用更改

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    params: { ...data }
  })
}

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

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

4.查看request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
 //withCredentials:true，//跨域请求时发送cookies
  timeout: 5000 // 超时
})

// request interceptor
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么

    if (store.getters.token) {
		//让每个请求携带令牌
		//['X-Token']是一个自定义头密钥
		//请根据实际情况修改
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
    If you want to get http information such as headers or status
    Please return  response => response
  */

  /**
    通过自定义代码确定请求状态
这里只是一个例子
您还可以通过HTTP状态码来判断状态
   */
  response => {
    const res = response.data

    // 如果自定义代码不是20000，则判断为错误。不是20000端口全部是错
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008:非法令牌；50012:其他客户端登录；50014:令牌过期；
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('您已注销，可以取消以停留在此页面，或重新登录', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default service

5.编写后台
注意这里统一返回类型的code为20000，因为不是20000全是登录失败

 @GetMapping("/info")
    public Result getInfo() {
        //TODO 暂时未完成
        return Result.success().data("roles", "[admin]").data("name", "admin").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }

    /**
     * 模拟登录接口
     *
     * @return
     */
    @SysLog
    @PostMapping("/login")
    public Result getLogin(@RequestParam("username") String username
            , @RequestParam("password") String password
            , HttpServletRequest request) {
        HttpSession session = request.getSession();
        QueryWrapper<SysUser> wrapper = new QueryWrapper<>();
        wrapper.eq("user_name", username);
        SysUser one = this.sysUserService.getOne(wrapper);
        if (one != null && password.equals(one.getPassword())) {
            //登录成功获取当前登录用户的身份编号
            QueryWrapper<SysUserRole> wrapper1 = new QueryWrapper<>();
            wrapper1.eq("user_id", one.getUserId());
            SysUserRole one1 = this.sysUserRoleService.getOne(wrapper1);
            //存储用户身份id
            if (one1 != null) {
                session.setAttribute("role_id", one1.getRoleId());
                //登录成功
                logger.info("登录成功" + Result.success().data("user", one).data("token", "admin-token"));
                return Result.success().data("user", one).data("token", "admin-token");
            } else {
                //登录失败
                return Result.error().message("对不起，该用户暂时未被授权");
            }
        }
        //登录失败
        return Result.error().message("登录失败");
    }
 /**
     * 实现用户退出
     *
     * @return
     */
    @SysLog
    @PostMapping("/logout")
    public Result logout(HttpServletRequest request) {
        HttpSession session = request.getSession();
        session.removeAttribute("userInfo");
        session.removeAttribute("role_id");
        return Result.success();
    }