vue 前端登录获取token后添加到cookie,并使用token获取其他数据(添加到请求头中)

1.登录获取到token存到cookie中

在这里插入图片描述

 这里我的cookie设置为一天失效
cookie.js代码如下

// 设置cookie
export function setCookie(c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie =
    c_name +
    '=' +
    encodeURIComponent(value) +
    ';expires=' +
    exdate.toGMTString() +
    ';path=/';
}
// 读取cookie
export function getCookie(c_name) {
  let c_start = null;
  let c_end = null;
  if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + '=');
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      c_end = document.cookie.indexOf(';', c_start);
      if (c_end == -1) c_end = document.cookie.length;
      return decodeURIComponent(document.cookie.substring(c_start, c_end));
    }
  }
  return '';
}
// 检查cookie
export function checkCookie(c_name) {
  let username = getCookie(c_name);
  console.log(username);
  if (username != null && username != '') {
    return true;
  } else {
    return false;
  }
}
// 清除cookie
export function clearCookie(name) {
  setCookie(name, '', -1);
}

main.js导入到全局使用

import { setCookie, getCookie, checkCookie, clearCookie } from '@/utils/cookie';
Vue.prototype.$setCookie = setCookie;
Vue.prototype.$getCookie = getCookie;
Vue.prototype.$checkCookie = checkCookie;
Vue.prototype.$clearCookie = clearCookie;

request.js请求头添加token

//导入
import {
    getCookie
} from '@/utils/cookie'
//使用
service.interceptors.request.use(
    res => {
        if (res) {
            if (getCookie("token")) {
                res.headers.Authorization = getCookie("token")
            }
            return res;
        }
    },
    err => {
        return Promise.reject(err);
    }
);

 最后浏览器可查看到

在这里插入图片描述

 并且下一次发请求时候请求参数中可查看到在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值