[JavaScript知识库] 有关vue项目的按需引入element-UI接口跨域代理axios封装接口导航守卫

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 有关vue项目的按需引入element-UI接口跨域代理axios封装接口导航守卫 -> 正文阅读

[JavaScript知识库]有关vue项目的按需引入element-UI接口跨域代理axios封装接口导航守卫

有关vue项目的按需引入element-UI接口跨域代理axios封装接口导航守卫

vue项目按需引入element-UI

在项目中终端运行npm install element-ui -S
```
npm install element-ui -S
```
在项目终端安装@bable/preset-env
```
npm install @babel/preset-env -D
```

把babel.config.js文件修改为：

module.exports = {
    presets: [
      ["@babel/preset-env", { "modules": false }]
    ],
    plugins: [
      [
        'component',
        {
          libraryName: 'element-ui',
          styleLibraryName: 'theme-chalk'
        }
      ]
    ]
}

项目main.js文件中引入element-ui样式

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在项目src目录下创建一个关于element-ui的配置文件element_ui.js,内容如下：

import Vue from 'vue';
import {
    Pagination,
    Dialog,
    Autocomplete,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Menu,
    Submenu,
    MenuItem,
    MenuItemGroup,
    Input,
    InputNumber,
    Radio,
    RadioGroup,
    RadioButton,
    Checkbox,
    CheckboxButton,
    CheckboxGroup,
    Switch,
    Select,
    Option,
    OptionGroup,
    Button,
    ButtonGroup,
    Table,
    TableColumn,
    DatePicker,
    TimeSelect,
    TimePicker,
    Popover,
    Tooltip,
    Breadcrumb,
    BreadcrumbItem,
    Form,
    FormItem,
    Tabs,
    TabPane,
    Tag,
    Tree,
    Alert,
    Slider,
    Icon,
    Row,
    Col,
    Upload,
    Progress,
    Badge,
    Card,
    Rate,
    Steps,
    Step,
    Carousel,
    CarouselItem,
    Collapse,
    CollapseItem,
    Cascader,
    ColorPicker,
    Transfer,
    Container,
    Header,
    Aside,
    Main,
    Footer,
    Loading,
    MessageBox,
    Message,
    Notification
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

将配置好的element_ui.js文件引入main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css';
import './element_ui'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

接口跨域代理

vue中的.env文件为环境变量配置文件,配置接口请求的地址项目根目录创建.env.development
```
NODE_ENV = 'development'
VUE_APP_URL = 'http://localhost:5000'
```

vue项目中的package.json配置

  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

vue项目根目录创建vue.config.js文件配置跨域内容

module.exports = {
    devServer: {
        port:8080,
        host:'localhost',
        https:false,
        open:true,
        proxy: {
            '/api': {
                target: process.env.VUE_APP_URL,
                changeOrigin: true,
                pathRewrite: {
                    '^/api':''
                }
            },
        }
    },
}

axios封装接口

安装终端安装axios

npm install axios -g

在项目src目录新建utils文件夹，并在utils下新建request.js文件,文件内容如下

//1. 实例化axios对象，并设置请求地址和超时时间

import axios from 'axios';
const api = axios.create({
    baseURL: '/api' , // 所有请求的公共地址部分
    timeout:3000, // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
    withCredentials: true,
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    }
})

// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
    // config 请求的所有信息
    // console.log(config);
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
    Promise.reject(err)
})
// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
    // config 请求的所有信息
    // console.log(config);
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
    Promise.reject(err)

})

export default  api; //一定要导出

在项目src目录下新建api文件夹，并在api下新建login.js文件统一管理不同模块的接口

import api from '../utils/request'
export const aa = (params) => api.get('/students', { params})

另外说一个东西我没有用过不知道好用不就是关于axios与vue的整合vue-axios有兴趣的可以搜一下

项目中导航守卫

导航守卫防止用户通过修改在没有登录的情况下通过修改url地址访问详情页面
我这边用了一个例子演示

首先有一个登录组件login,用户登录成功后将isAuth设置为true并跳转详情页面，实际开发中是通过调用接口将用户名和密码传给后端然后返回toke将toke存到sessionStorage或者vuex中的

 submitLogin(){
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        if(this.loginForm.username == 'admin' && this.loginForm.password == 'ssssss'){
                            sessionStorage.setItem('isAuth',true);
                            this.$router.push('/home');
                        }else {
                            sessionStorage.setItem('isAuth',false);
                            this.$router.push('/');
                            this.loginForm.username = '';
                            this.loginForm.password = '';
                        }
                    } else {
                        this.$message.error('登录出错请重新输入');
                        return false;
                    }
                });
            }

在src目录下新建router文件夹，新建index.js文件代码如下

import Vue from 'vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    {
        path:'/',
        name:'LogIn',
        component: () => import('../components/LogIn')
    },
    {
        path:'/home',
        name:'Home',
        component: ()=> import('../components/Home')
    }
]

const router = new VueRouter({
    mode: 'history',
    routes,
})

//导航守卫
router.beforeEach((to, from, next) => {
    if(to.path == '/'){//登录页不需要做权限控制
        next();
    }else{
        if(sessionStorage.isAuth === 'true'){ //登录成功
            next();
        } else{ //登录失败
            return next('/')
        }
    }
})

export default router;