vue 获取cookie

要达到微信扫描二维码获取微信用户信息返回个PC端，请看：

https://blog.csdn.net/weixin_42418774/article/details/103168448

一、使用三个js文件

你的接口js封装文件

request.js  请求文件

auth.js    cookie文件

import axios from 'axios'
import request from '@/utils/request'

//相册数据
export const AlbumData = (params) => {
  return request.request({
    method: 'post',
    url: 'url/pc/search?',
    params:params
  })
}

request.js

import axios from 'axios'
import { Message,MessageBox } from 'element-ui'
import { getUseridInCookie } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: "url", // api 的 base_url
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // Do something before request is sent
    var token = getUseridInCookie();
    if (!!token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
        config.headers['token'] = getUseridInCookie()
    }
		  // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
		  //  config.headers['X-Type'] = process.env.TYPE
    return config
  },
  /**
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
   */
  error => {
    // Do something with request error
    //console.log(error) // for debug
    Promise.reject(error)
  }
)

// // response interceptor
service.interceptors.response.use(
  //response => response,
  /**
   * 
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
   */
     response => { 
       const res = response.data
       if (res.code >= 300) {
         Message({
           message: res.message,
           type: 'error',
           duration: 5 * 1000
         })
         // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
         if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
           // 请自行在引入 MessageBox
            
           MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
             confirmButtonText: '重新登录',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             store.dispatch('FedLogOut').then(() => {
               location.reload() // 为了重新实例化vue-router对象 避免bug
             })
           })
         }
        // return Promise.reject(res.message)
        //return Promise.reject('error')
       } else {
         return response
       }
     },
  error => {
    //console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000.4
    })
    return Promise.reject(error)
  }
)

export default service

auth.js

import Cookies from 'js-cookie'

const UseridKey = 'userid'

export function getUseridInCookie() {
  return Cookies.get(UseridKey);
}

export function setUseridInCookie(userid) {
  return Cookies.set(UseridKey, userid);   
}

export function removeUseridInCookie() {
  return Cookies.remove(UseridKey)
}

补充WebSocket

initWebSocket()
          {
            if ("WebSocket" in window) {
              var ws = new WebSocket("ws://后端接口/websocket/12345")
              //ws://后端接口+你获取到的ws的url（后端会写一个接口给你，在该接口获取二维码url和ws的url）
              ws.onopen = function () {
                ws.send("start a websocket");
              };
              ws.onmessage = function (evt) {
                this.userInfo = JSON.parse(evt.data);
                // 后台返回了json字符串，内部包含用户信息
                // debugger;
                setUseridInCookie(this.userInfo.token); //把从微信获取来的token存入cookie
                console.log('user--->', evt.data);
               // if (evt.data != null) {
                //  console.log('登陆成功');
               // }
              };
              ws.onclose = function () {
                console.log("close websocket");
              };
            } else {
              console.log("not support websocket.");
            }
          }

查看浏览器查看cookie：

 

 拓展：

我现在需要用户信息，我是想让它和token分开，所以我又写了方法cookie来分别获取：

在你需要的页面里面进行引用：

import {getUseridInCookie,getCookieicon,getCookiename} from '@/utils/auth'

就可以进行下面的操作了！

        this.iconurl=unescape(getCookieicon('UserIcon'))//获取cookie里面的用户icon
       // this.iconurl=document.cookie.split(";")[1].split("=")[1] //获取cookie里面的用户icon
        this.username=unescape(getCookiename('UserName'))   //获取cookie里面的用户name并做中文处理
        console.log('iconurl',this.iconurl)
        console.log('cookie',this.username)

只需要在auth.js里面重复操作：

 在你需要的页面引用就好了！！！