Proyecto de construcción de Vue (2) relacionado con token

En Vue, token significa "token", que es una cadena generada por el servidor y un identificador para que el cliente realice una solicitud; cuando el usuario inicia sesión por primera vez, el servidor genera un token y se lo devuelve al cliente. El cliente sólo necesita traer el token para solicitar datos, y no es necesario utilizar un nombre de usuario y contraseña.
Método 1: utilizar localStorage para acceder a la cookie: verificación del token realizada durante el inicio de sesión de front-end (guardia de enrutamiento, interceptor de solicitudes, interceptor de respuestas)

Método 2: Instalar js-cookie (complemento)
Uso: Cómo utilizar js-cookie

2. Encapsular el método js-cookie
Después de la instalación, cree una carpeta, src/utils/auth.js

import Cookies from 'js-cookie'

const TokenKey = 'icp-token'
const UserKey = 'User-Token'

export function getToken() {
    
    
  return Cookies.get(TokenKey)
}
export function getUserId() {
    
    
  return Cookies.get(UserKey)
}

export function setToken(token) {
    
    
  return Cookies.set(TokenKey, token)
}

export function setUserId(id) {
    
    
  return Cookies.set(UserKey, id)
}

export function removeToken() {
    
    
  Cookies.remove(TokenKey)
  removeTokenAll();
  return Cookies.remove(UserKey)
}


//清除uap的cookie 不然跳转过去还是登录状态
function removeTokenAll() {
    
    
  Cookies.remove('accessToken')
  Cookies.remove('refreshToken')

  Cookies.remove('uapAccessToken', {
    
    
    path: '',
    domain: '.minexiot.com'
  })
}

3. Úselo (*punto importante, no importa cómo acceder al token. También puede escribir acceso a localStorage sin un complemento. Lo principal es traer el token al realizar una solicitud) y usarlo en la solicitud
. js (procesamiento de solicitudes de axios)

import {
    
     getToken } from '@/utils/auth'

// request拦截器
service.interceptors.request.use(config => {
    
    
if(getToken ()){
    
    
 config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
})

O úselo cuando el enrutador salte

import {
    
     getToken } from '@/utils/auth'

router.beforeEach((to, from, next) => {
    
    
//处理 如果有token
  if (getToken()) {
    
    
  }else{
    
    
  }
  })

Lógica general: el usuario inicia sesión en el backend por primera vez y devuelve el token, que se almacena en localStorage (se debe agregar 'Portador' delante del token). Al saltar, se verifica el token.

export function register(data) {
    
    
  return request({
    
    
    url: '/register',
    headers: {
    
    
      isToken: false
    },
    method: 'post',
    data: data
  })
}

encabezados: { Autorización: localStorage.getItem('token'), }, código para acceder a las cookies sin usar js-cookie: verificación de token del método de verificación de inicio de sesión