vue搭建项目（二）token相关

在vue中，token的意思是“令牌”，是服务端生成的字符串，是客户端进行请求的一个标识；当用户第一次登录后，服务端生成一个token并返回给客户端，以后客户端只需要带着token请求数据即可，不需再使用用户名和密码。
方法一：使用localStorage存取cooken:前端登录时所做的token验证（路由守卫、请求拦截器、响应拦截器

方法二：安装js-cookie（插件）
用法：js-cookie如何使用

二、封装js-cookie方法
安装完后，创建一个文件夹，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'
  })
}

三、使用 (*重点，怎么存取token其实无所谓，也可以不用插件自己写localStorage存取就行，主要是请求的时候带上token）
在request.js中使用（处理axios请求）

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

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

或者router跳转时使用

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

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

大致逻辑：用户第一次登陆后台返回token,用localStorage存起来（token前面必须加‘Bearer’），跳转的时候，验真token，

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

headers: {
Authorization: localStorage.getItem(‘token’),
},
不使用js-cookie存取cookie的代码：登录验证方法之token校验

vue搭建项目（二）token相关

猜你喜欢