【vue-element-admin】登录接口对接自己的后端, .NET Core Web API 6

文章介绍

• vue-element-admin 登录接口对接
• 后端基于.NET Core Web API 6
• EFcore 和后端数据链接
• Jwt 认证

开源资源连接

• Core + Vue 后台管理基础框架
• vue-element-admin-site

新建项目一个Web API项目：vue element admin

• 不要配置HTTPS
• 配置EFCore
• 配置跨越
• 配置JWT
• 后台运行程序

配置vue-element-admin

我的方法不是全局配置，没有配置以下文件

• .env.development

VUE_APP_BASE_API = '/dev-api'

• vue.config.js

  devServer: {
    'proxy': {
      '/api': {
        target: 'http://localhost:5172',
        changeOrigin: true
      }
    }
  },

我只修改了以下文件

• src/api/user.js 修改接口，因为用的baseURL，所已不是全局配置

import request from '@/utils/request'

export function login(data) {
  return request({
    baseURL: 'http://localhost:5172/api/user',
    url: '/login',
    method: 'post',
    data
  })
}

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

export function logout() {
  return request({
    baseURL: 'http://localhost:5172/api/user',
    url: '/logout',
    method: 'post'
  })
}

• store/modules/user.js

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router, { resetRouter } from '@/router'

const state = {
  token: getToken(),
  name: '',
  avatar: '',
  introduction: '',
  roles: []
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_INTRODUCTION: (state, introduction) => {
    state.introduction = introduction
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(data => {
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          reject('Verification failed, please Login again.')
        }

        const { roles, name, avatar, introduction } = data

        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        commit('SET_INTRODUCTION', introduction)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state, dispatch }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        commit('SET_TOKEN', '')
        commit('SET_ROLES', [])
        removeToken()
        resetRouter()

        // reset visited views and cached views
        // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
        dispatch('tagsView/delAllViews', null, { root: true })

        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      resolve()
    })
  },

  // dynamically modify permissions
  async changeRoles({ commit, dispatch }, role) {
    const token = role + '-token'

    commit('SET_TOKEN', token)
    setToken(token)

    const { roles } = await dispatch('getInfo')

    resetRouter()

    // generate accessible routes map based on roles
    const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
    // dynamically add accessible routes
    router.addRoutes(accessRoutes)

    // reset visited views and cached views
    dispatch('tagsView/delAllViews', null, { root: true })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

• 用utils/request.js

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

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Authorization'] = 'Bearer ' + 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
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    const statusCode = response.status
    // if the custom code is not 20000, it is judged as an error.
    if (statusCode !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    if (!error.response) {
      return
    }
    // 对错误进行自定义展示
    const statusCode = error.response.status
    const res = error.response.data
    if (statusCode === 401) {
      // to re-login
      MessageBox.confirm('登陆已经失效', '确认', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload()
        })
      })
    } else if (statusCode === 406) {
      Message.error('账号或者密码错误')
    } else if (statusCode === 422) {
      // 表单验证失败之类的错误提示,给出具体错误，可由用户手动关闭，因为有时候错误信息我们需要复制
      const errDetail = Object.values(res.errors)
      Notification({
        title: '错误通知',
        dangerouslyUseHTMLString: true,
        duration: 0,
        message: `
            <div>${res.message}div>
            <div>错误详情div>
            <div>${errDetail}div>
          `,
        type: 'error'
      })
    } else if (statusCode === 403) {
      Notification({
        title: '警告',
        dangerouslyUseHTMLString: true,
        duration: 0,
        message: `
            <div>${res.message}div>
          `,
        type: 'warning'
      })
    } else if (statusCode === 404) {
      // 未找到资源
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 3 * 1000
      })
    } else {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
    }
    return Promise.reject(error)
  }
)

export default service