vue搭建项目（二）token相关

一个打工仔的笔记

已于 2023-07-14 17:33:46 修改

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-06-15 19:25:15 首次发布

本文链接：https://blog.csdn.net/web_notes/article/details/131234203

版权

文章讲述了在Vue应用中如何处理token进行用户认证。用户登录后，服务器返回token，然后使用localStorage或js-cookie插件存储。在请求数据时，通过axios的请求拦截器添加Authorization头，附上token。同时，还展示了如何在路由守卫中检查token，以及注册和登录时的token校验方法。

摘要由CSDN通过智能技术生成

在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
  })
}