本网站可以出售:只需60000元直接拥有。QQ:939804642
您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

vue

51自学网 2022-02-21 13:34:44
  javascript

按如下步骤进行

1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置

2.http.js内容:请求数据方式封装

3.utils.js内容:获取token,判断token是否存在

4.store文件:

vuex 仓库配置

  • vuex 持久化
  • vuex 模板引用

5.接口的封装

目录

request.js内容

http request请求拦截器和http response服务器响应拦截器配置

// http request 请求拦截器,有token值则配置上token值import axios from 'axios'import Promise from 'promise'import util from './utils';import store from './../store/index';const service = axios.create({    timeout: 60000, // 请求超时时间    headers: {        // Authorization: Authorization,        'Content-Type': 'application/json;charset=UTF-8'    }});// http请求拦截器service.interceptors.request.use(    config => {        let tokenExist = util.tokenExist();        if (tokenExist) {            // bus.$emit('toggleloading', true)//显示loading            //如果token存在            config.headers['Authorization'] = `Bearer ${util.getToken()}`;        }        // Toast.loading({        //     message: '加载中...',        //     duration: 0,        //     forbidClick: true        // });        return config;    },    error => {        Promise.reject(error);    })// http response 服务器响应拦截器,// 这里拦截401错误,并重新跳入登页重新获取tokenservice.interceptors.response.use(    response => {        if (response.status === 200) {            //通讯成功            // Toast.clear();            /*************             * response.data.status === 0 错误             * response.data.status === 100 成功             * response.data.status === 401 token过期             *             * *************/            // bus.$emit('toggleloading', false)//隐藏loading            if (response.data.state === 401) {                //如果是token过期,跳转至登录                Message.error("登录已过期,请重新登录!");                store.commit('SET_TOKEN', '');                util.goLogin();            } else if (response.data.state === 0) {                // Message.error(response.data.message);                return response.data;            } else {                return response.data;            }        }    },    error => {        //请求失败        // ;        const response = error.response;        if (response.status === 401) {            // Toast.fail(response.data.message);            Message.error("登录已过期,请重新登录!");            util.goLogin();        } else if (response.status === 403) {            $router.push({                name: '403'            });        } else {            // Toast.fail(response.data.message ? response.data.message : '系统错误请联系管理员');            // Message.error({            //     message: '无服务,请联系管理员'            // });        }        return Promise.reject(error);    });export default service;

http.js内容

请求数据方式

import request from './request';// import store from './../store/index';const http = {    request(config) {        request(config);    },    post(url, data) {        // if(data instanceof Object){        // }else{        //     data = {        //         ...data        //     };        // }        return request({            url,            method: 'post',            data        });    },    postFile(url, data, contentType) {        return request({            url,            method: 'post',            data,            contentType        });    },    get(url, params) {        return request({            url,            method: 'get',            params        });    },    put(url, data) {        return request({            url,            method: 'put',            data        });    },    delete(url) {        return request({            url,            method: 'delete'        });    },    download(url, params) {        return request({            url,            method: 'get',            params,            responseType: 'blob'        });    },    downloadPost(url, data) {        return request({            url,            method: 'post',            data,            responseType: 'blob'        });    }};export default http;

utils.js内容

获取token,判断token是否存在

import store from '../store/index';let util = {    //获取token    getToken() {        return store.getters.token;    },    //判断token是否存在    tokenExist() {        let flag;        let token = store.getters.token;        if (token && token !== '') {            flag = true;        } else {            flag = false;        }        return token;    },}export default util

vuex 仓库配置

  • vuex 持久化
  • vuex 模板引用

index.js内容

import Vue from "vue"import Vuex from "vuex"import VuexPersistence from 'vuex-persist';import db from './db'Vue.use(Vuex)//vuex 状态持久化const vuexLocal = new VuexPersistence({    storage:window.localStorage})const store = new Vuex.Store({    state:{},    mutations:{},    actions:{},    modules:{        db    },    plugins:[vuexLocal.plugin]})export default store

 db.js内容

const db = {    state: {        token: '',    },    getters:{        token:state => state.token    },    mutations: {        // 存储token        setToken: (state, value) => {            state.token = value        }    },    actions: {}}export default db

接口封装

import http from "../common/http"/***********登录注册*************/// 测试接口function text(params){    return http.get("api/Test/GetList", params)}//登录  function Login(params) {    return http.post("api/Login/Login", params)}// 获取图形验证码function GetValidateCode(params) {    return http.post("api/Login/GetValidateCode", params)}// 获取手机验证码 注意:需要提前人机验证后调用 否则有被恶意刷短信的风险function GetPhoneCode(params) {    return http.post("api/Login/GetPhoneCode", params)}// 注册 校验信息function RegisterUserVerify(params) {    return http.post("api/Login/RegisterUserVerify", params)}// 注册 设置密码 注册用户信息function RegisterUserInfo(params) {    return http.post("api/Login/RegisterUserInfo", params)}// 忘记密码 验证姓名手机号function ResetPasswordVerify(params) {    return http.post("api/Login/ResetPasswordVerify", params)}// 忘记密码 密码更新function ResetPassWord(params) {    return http.post("api/Login/ResetPassWord", params)}export {    Login,    text,    GetPhoneCode,    RegisterUserVerify,    GetValidateCode,    ResetPasswordVerify,    ResetPassWord,    RegisterUserInfo}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注51zixue.net的更多内容!


下载地址:
JSscript标签有哪些属性
JavaScript的Set数据结构详解
51自学网自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1