Day13-登录前端整合-p195

})

//headers: {‘token’: cookie.get(‘guli_token’)}

}

}

2、在pages文件夹中创建登录页面,调用方法


在这里插入图片描述

(1)安装js-cookie插件

npm install js-cookie

(2)login.vue

登录

·

注册

<input type=“button” class=“sign-in-button” value=“登录” @click=“submitLogin()”>

社交帐号登录
      • 3、在request.js添加拦截器,用于传递token信息


        import axios from ‘axios’

        import { MessageBox, Message } from ‘element-ui’

        import cookie from ‘js-cookie’

        // 创建axios实例

        const service = axios.create({

        //baseURL: ‘http://qy.free.idcfengye.com/api’, // api 的 base_url

        //baseURL: ‘http://localhost:8210’, // api 的 base_url

        baseURL: ‘http://localhost:9001’,

        timeout: 15000 // 请求超时时间

        })

        // http request 拦截器

        service.interceptors.request.use(

        config => {

        //debugger

        if (cookie.get(‘guli_token’)) {

        config.headers[‘token’] = cookie.get(‘guli_token’);

        }

        return config

        },

        err => {

        return Promise.reject(err);

        })

        // http response 拦截器

        service.interceptors.response.use(

        response => {

        //debugger

        if (response.data.code == 28004) {

        console.log(“response.data.resultCode是28004”)

        // 返回 错误代码-1 清除ticket信息并跳转到登录页面

        //debugger

        window.location.href=“/login”

        return

        }else{

        if (response.data.code !== 20000) {

        //25000:订单支付中,不做任何提示

        if(response.data.code != 25000) {

        Message({

        message: response.data.message || ‘error’,

        type: ‘error’,

        duration: 5 * 1000

        })

        }

        } else {

        return response;

        }

        }

        },

        error => {

        return Promise.reject(error.response) // 返回接口返回的错误信息

        });

        export default service

        4、修改layouts中的default.vue页面


        (1)显示登录之后的用户信息

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值