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

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

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

为方便接口调用，本文实现全局注册API接口，首先在scr/api文件夹下面新建system.js接口调用文件，然后scr/api/index.js对外统一暴露。在main.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'
  })
}

/***********菜单管理************/
//获取一级分类数据接口
export const reqMenuTreeList = ()=> request({url: '/api/System/GetMenuTreeList',method:'get'});

//添加、修改保存
export const reqAddOrUpdateMenu=(model)=>{
  // 带给服务器数据携带ID--修改
  if(model.id){
      return request({url:'/api/System/EditMenu',method:'put',data:model})
  }
  else
  {
      //新增人员
      return request({url:'/api/System/AddMenu',method:'post',data:model})
  }
}

//删除菜单
export const reqDeleteMenu = (id) => {
  return request({ url: `/api/System/DeleteMenu?id=${id}`, method: 'delete' })
}

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

Vue.config.productionTip = false
//引入相关API请求接口
import API from '@/api';
//组件实例的原型的原型指向的是Vue.prototype
//任意组件可以使用API相关的接口
Vue.prototype.$API = API;

      async getPageList() {
        let result = await this.$API.system.reqMenuTreeList();
        if (result.code == 200) {
          this.list = result.data.rows;
          this.expandKeys = [this.list[0].id];
        }
      },