（四）vue cookie

忘是亡心i 2023-05-21 08:51 10阅读 0赞

一、介绍：

二、项目中使用：

如登录成功后把token存入cookie中，后面调用接口时把token放在header中传给后台，退出登录再清除cookie中的token。

1、定义token存储方法，

![20200424172331272.png][]

如我这里把token的存储写在auth.js中：

import Cookies from 'js-cookie'
    
    const TokenKey = 'Admin-Token'
    
    export function getToken() {
      return Cookies.get(TokenKey)
    }
    
    export function setToken(token) {
      return Cookies.set(TokenKey, token)
    }
    
    export function removeToken() {
      return Cookies.remove(TokenKey)
    }

2、调用：其他地方调用，直接引入这个方法调用即可，

如store中调用，登录成功后把token存到cookie中，退出登录再清除cookie中的token：

import { login, logout, getMyAuthorities } from '@/api/login'
    import { getToken, setToken, removeToken } from '@/utils/auth'
    
    
    const user = {
      state: {
        token: getToken(),
        name: '',
        authorities: [],
        roles: []
      },
    
      mutations: {
        SET_TOKEN: (state, token) => {
          state.token = token
        },
        SET_NAME: (state, name) => {
          state.name = name
        },
        SET_PERMISSION: (state, authorities) => {
          state.authorities = authorities
        },
        SET_ROLES: (state, roles) => {
          state.roles = roles
        }
      },
    
      actions: {
        // 登录
        Login({ commit }, user) {
          const userName = user.userName
          const pwd = user.password
          return new Promise((resolve, reject) => {
            login(user).then(response => {
              const data = response.data
              setToken(data)
              commit('SET_TOKEN', data)
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        },
    
     
    
        // 获取用户权限信息
        GetInfo({ commit, state }) {
          return new Promise((resolve, reject) => {
            getMyAuthorities().then(response => {
              console.info('res' + response)
              const data = response.data
              var permissions = []
              data.forEach(item=>{
                permissions.push(item.authorityCode);
              })
              
              commit('SET_PERMISSION', permissions)
    
              resolve(permissions)
            }).catch(error => {
              reject(error)
            })
          })
        },
    
    
        // 登出
        LogOut({ commit, state }) {
          return new Promise((resolve, reject) => {
            logout(state.token).then(() => {
              commit('SET_TOKEN', '')
              commit('SET_PERMISSION', [])
              removeToken()
              logout().then(response=>{})
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        },
    
        // 前端 登出
        FedLogOut({ commit }) {
          return new Promise(resolve => {
            commit('SET_TOKEN', '')
            removeToken()
            resolve()
          })
        }
      }
    }
    
    export default user

再如在request.js中调用后端接口处从cookie中获取token传给后端：

import axios from 'axios'
    // 配置session跨域
    axios.defaults.withCredentials = true
    import { Message, MessageBox } from 'element-ui'
    import store from '../store'
    import { getToken } from '@/utils/auth'
    
    // 创建axios实例
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 5000 // 请求超时时间
    })
    
    // request拦截器
    service.interceptors.request.use(config => {
      if (store.getters.token) {
        config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, error => {
      // Do something with request error
      console.log(error) // for debug
      Promise.reject(error)
    })
    
    // respone拦截器
    service.interceptors.response.use(
      response => {
      /**
      * code为非20000是抛错 可结合自己业务进行修改
      */
        const res = response.data
        if (res.code !== 200 && res.code !=300) {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
    
          // 401 token失效
          if (res.code === 401) {
            // MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
            //   confirmButtonText: '重新登录',
            //   cancelButtonText: '取消',
            //   type: 'warning'
            // }).then(() => {
            //   store.dispatch('FedLogOut').then(() => {
            //     location.reload()// 为了重新实例化vue-router对象 避免bug
            //   })
            // })
            store.dispatch('FedLogOut').then(() => {
              location.reload()// 为了重新实例化vue-router对象 避免bug
            })
          }
          return Promise.reject('error')
        } else {
          return response.data
        }
      },
      error => {
        console.log('err' + error)// for debug
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service

[20200424172331272.png]: /images/20230521/54fbdd89725d41e8b83a972eeb62361d.png