Vue项目中获取Token后，将Token放入Headers

Vue项目中获取Token后，将Token放入Headers

需要准备的：Vue、js-cookie、Vuex、Vue-Route

• 1、在utils文件夹下新建auth.js文件，获取请求中的Token

import Cookies from 'js-cookie'

const TokenKey = '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、在utils文件夹下新建request.js文件,创建对应拦截器

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import {store,state} from '../store/index'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

// axios.defaults.headers.common['Authentication-Token'] = store.state.token
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  //2021/8/3 lxy
  if(res.data.data.token){
    res.headers.Token = res.data.data.token;
    }
    return res;
    // 未设置状态码则默认成功状态
    // const code = res.data.code || 200;
    // // 获取错误信息
    // const msg = errorCode[code] || res.data.msg || errorCode['default']
    // if (code === 401) {
    //   MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
    //       confirmButtonText: '重新登录',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }
    //   ).then(() => {
    //     store.dispatch('LogOut').then(() => {
    //       location.href = '/index';
    //     })
    //   })
    // } else if (code === 500) {
    //   Message({
    //     message: msg,
    //     type: 'error'
    //   })
    //   return Promise.reject(new Error(msg))
    // } else if (code !== 200) {
    //   Notification.error({
    //     title: msg
    //   })
    //   return Promise.reject('error')
    // } else {
    //   return res.data
    // }
  },
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    }
    else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    }
    else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

• 3、新建permission.js通过dispatch异步调用接口获取token

import store from './store'

// if (global.nitialization) { // 不加这个判断，路由会陷入死循环
          // global.nitialization = false;
          store.dispatch('GetUserInfo',{ticket:window.location.search})
            .then((response) => {
              // 跳往首页
              if (response.status === 200) {
                next();
              }
              store.dispatch('GenerateRoutes').then(accessRoutes => {
                // 根据roles权限生成可访问的路由表
                // 测试 默认静态页面
                router.addRoutes(accessRoutes) // 动态添加可访问路由表 
                next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 
              })
            })
            .catch(err => {
              store.dispatch('FedLogOut').then(() => {
                Message.error(err)
                next({ path: '/' })
              })
            })
        // }

• 4、在store文件夹下新建store.js文件夹，进行状态管理

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    user,
    tagsView,
    permission,
    settings
  },
  getters,
  state:{
    token:''
    },
    mutations:{
    set_token(state, token) {
    state.token = token
    sessionStorage.token = token
    },
    del_token(state) {
    state.token = ''
    sessionStorage.removeItem('token')
    }
  }
})

export default store

• 5、在store文件夹下新建permission.js文件夹，进行状态管理

import { GenerateRoutes } from '@/api/menu'
import Layout from '@/layout/index'

const permission = {
  state: {
    routes: [],
    addRoutes: []
  },
  mutations: {
    SET_ROUTES: (state, routes) => {
      state.addRoutes.data = routes.data
      // state.routes = constantRoutes.concat(routes)
      state.routes = routes.data.data
    }
  },
  actions: {
    // 生成路由
    GenerateRoutes({ commit }, userInfo) {
      return new Promise((resolve,reject) => {
        // 向后端请求路由数据
        GenerateRoutes().then(accessedRoutes => {
          // const accessedRoutes = filterAsyncRouter(res.data)
          // filterAsyncRouter(accessedRoutes.data)
          commit('SET_ROUTES', accessedRoutes)
          // resolve(accessedRoutes)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

• 6、新建menu.js文件获取动态路由

import request from '@/utils/request'

// 获取路由
export const GenerateRoutes = () => {
  return request({
    url:[process.env.VUE_APP_BASE_API]+ '/auth/getMenu',
    method: 'get',
  })
}

7、在需要调用的vue文件中直接调用该方法

import { GenerateRoutes } from "@/api/menu.js";

  methods: {
    GenerateRoutes() {
      // debugger;
      GenerateRoutes().then((res) => {
        //其中code代表的是返回的状态值，200表示返回正常
        if (res.data.code === 200) {
          //在这里进行组件赋值操作
          this.getValue = res.data.data;
        }
      });
    },
    barHref(s) {
      if(s==this.activeMenu)return
      this.$router.push({ path: s });
    }
  },