本实例教程是.net core 系列实例开发教程-权限管理系统前端开发教程，使用PanJiaChen写的Vue后台模板。

本文源码下载地址：http://www.80cxy.com/Blog/ResourceView?arId=202403191532545995NAAqJh

系列教程地址：http://www.80cxy.com/Blog/ArticleView?arId=202403191517574161ay3s5V

前端项目调用.net core本地运行的接口项目，由于是两个项目端口号不一致，存在跨域问题，调用接口之前需要解决此问题，解决方法在前端项目配置代理即可。

跨域问题解决后实现前端调用接口代码，然后将登录代码改为调用接口实现，登录逻辑需要调用两个接口，验证用户名密码是否正确接口，以及登录成功后获取用户信息接口，用户信息包含权限信息，权限在最后一节进行介绍。

修改vue.config.js文件增加代理设置，代码如下：

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    //配置代理跨域
    proxy: {
      '/dev-api': {
        target: 'https://localhost:7118/',
        pathRewrite: { '^/dev-api': '' }
      }
    }
  },

在src/api文件夹下面新建index.js和system.js两个文件，index.js统一对外暴露项目接口，system.js实现具体与系统模块相关的接口代码。代码如下：

import request from '@/utils/request'
//管理用户登录
export function login(data) {
  return request({
    url: '/api/AdminLogin/AdminLogin',
    method: 'post',
    data
  })
}
//获取用户信息
export function getInfo(token) {
  return request({
    url: '/api/AdminLogin/GetUserInfo',
    method: 'get',
  })
}
//退出登录
export function logout() {
  return request({
    url: '/api/AdminLogin/LogOut',
    method: 'post'
  })
}



import * as talent from './system.js';
//对外暴露对象
export default{
    system,
}

修改前端登录代码为调用接口实现登录，修改src/store/modules/user.js登录及获取用户信息代码。代码如下：

//用户登录
  async login({ commit }, userInfo) {
    const { username, password } = userInfo
    let result = await login({ username: username.trim(), password: password })
    if (result.code == 200) {
      commit('SET_TOKEN', result.data.token)
      setToken(result.data.token)
      return 'ok'
    }
    else {
      return Promise.reject(new Error('faile'))
    }
  },

  // 获取用户信息
  async getInfo({ commit, state }) {
    let result = await getInfo(state.token)
    if (result.code == 200) {
      //返回数据包含：用户名name、用户头像avatar、routes[返回的标志：不同用户应该展示哪些菜单的标记]、roles（用户角色信息）、buttons[按钮的信息：按钮权限用的标记]
      const { data } = result
      commit('SET_NAME', data.name)
      commit('SET_AVATAR', data.avatar)
      //执行成功返回data数据
      return 'ok'
      //return Promise.resolve(result.data)
    }
    else {
      return Promise.reject(new Error('faile'))
    }
  },

用户登录成功后，在调用后续接口需要携带，token进行权限校验。需要修改request.js文件.代码如下：

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

    if (store.getters.token) {
      // let each request carry token
      //设置请求携带token，服务器端命名为Authorization
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)