1.token是什么？

token像是一把钥匙,在点击登录的时候,后台会返回一个token。在调用其它接口的时候可能需要使用到token。

token是一段加密的字符串如:

2.在请求头中加入token

有些接口的访问,是需要携带token过去的，这个时候可以在请求拦截器里面进行添加, 这个时候当我们请求接口的时候就会将token携带过去。

import Store from '@/store'

if (Store.state.user.token) {
    config.headers.Authorization = `Bearer ${Store.state.user.token}`
}

3.将token存储到Vuex中

Vuex刷新数据会进行丢失,这个使用就会用到本地存储的方式，用的较多的插件CookieJs。这样就很好地解决了刷新页面丢失token的问题。

(1)cookieJs的用法:

import Cookies from 'js-cookie'

const TokenKey = 'vue_admin_template_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/modules/user.js模块下

// 将token存储vuex中,vuex刷新就没了,解决刷新就没了的问题
import { getToken, setToken } from '@/utils/auth'
import { sysLogin } from '@/api/login'
import { sysProfile, sysUser } from '@/api/user'
import { Message } from 'element-ui'
// import { sysProfile } from '@/api/user'
const state = {
  // 有就取token 没有就为空
  token: getToken() || '',
  userInfo: ''
}
const mutations = {
  setToken(state, value) {
    state.token = value
    setToken(value)
  },
  setUserInfo(state, value) {
    state.userInfo = value
  }
}
const actions = {
  // 登录
  async toLogin(store, form) {
    const res = await sysLogin(form)
    Message.success('登录成功')
    store.commit('setToken', res.data)
    console.log(2)
  },
  // 获取用户信息
  async getUserInfo({ commit }) {
    const res = await sysProfile()
    console.log(res, '用户基本信息')
    // 获取用户头像
    const res2 = await sysUser(res.data.userId)
    console.log(res2, '用户头像')

    commit('setUserInfo', Object.assign({}, res.data, res2.data))
  }
}
const getters = {}
export default {
  namespaced: true,
  state,
  mutations,
  getters,
  actions
}

4.token失效的处理

token有一个时长,这个时长由后端进行设置，当出现401的时候token失效了,用户已经不能登录。

这个时候应该让用户返回到登录的页面，并清除token，和用户的信息。

  (error) => {
    if (error.response && error.response.status === 401) {
      // 清除token
      // 清除用户信息
      Store.commit('user/setToken', '')
      Store.commit('user/setUserInfo', '')
      Router.push('/login')
      // 提示错误信息
      Message.error(error.response.data.message)
      // 跳转到登录页面进行传值
      Router.push('/login?redirect=' + window.location.href.split('#')[1])
    }
    return Promise.reject(error)
  }

服务器返回的状态码为401,通常情况来讲是因为权限不足的原因。

扩展小知识点:

常见的http状态码：

2xx? 代表服务器响应成功

3xx? 重定向

4xx? 权限不足

500? 可能是服务器的错误