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

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

1. 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')
     

2. 接口跨域代理

   • 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':''
                     }
                 },
             }
         },
     }
     

3. 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有兴趣的可以搜一下

4. 项目中导航守卫

   • 导航守卫防止用户通过修改在没有登录的情况下通过修改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;
     

创作不易，本人前端小白，欢迎各位大佬提出建议，以免误导他人。