技術標籤：vueelementuispring bootvue.js

SpringBoot實現vue-admin-template登入介面

vue-admin-template

vue-admin-template是一個簡化版的vue-element-admin的模板，
適合vue用來做專案的搭建，雖然官方文件以及花褲衩前端大佬
在部落格中已經將大部分的疑難雜症解決了，但當完全自己搭建的
時候才發現多折騰

vue-admin-template登入介面請求詳解

要想搞懂一個介面，最好的方式就是
1.去看介面的定義宣告的引數
2.傳送請求檢視返回的資料格式

開始

1.先配置跨域等基礎資訊
在目錄中找到.env.development

# 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();
    }