token 的认识和使用

664 阅读1分钟

token

一. 认识 token

并不是所有的接口都可以无限制请求的,在请求某些需要权限的接口时,需要带上凭据

image-20200108170328228.png

什么是 Token

一个“令牌”(一串很长的字符串,由后端生成的),用来请求需要权限的接口时使用的。它有如下两个特点:

  • 它是由后端接口提供的

  • 一般在用户登陆时,由后端接口返回

image-20200704143421251.png

Token的基本使用流程

用户登录,获取token

保存token到本地

发起其它请求,携带token

二. 使用token

获取用户个人资料 这个接口是需要token才能访问的

1. 从登陆成功之后的返回值中复制出来token

image-20200108174549436.png

2. 补充api

在api/user.js中,添加一个getInfo功能,用来它去调用接口

// 获取用户个人资料
export const getProfile = () => {
  return ajax({
    method: 'GET',
    url: '/v1_0/user/profile',
    headers: {
      // Authorization: 'Bearer token值' 之间有空格
      Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiO
      jE1OTM4NTIyMjgsInVzZXJfaWQiOjExMDI0OTA1MjI4Mjk3MTc1MDQsInJlZnJlc2giOm
      ZhbHNlfQ.gR880MifO8GIFG6PNh9eOZGGpfcwNRkK6MpI1upN93w'
    }
  })
}

3. 调用api功能

在src/views/login/index.vue这个组件去调用getInfo功能,来取用户的信息

import {getProfile } from '@/api/user'

async doLogin () {
  // 尝试去调用一下获取用户的个人资料
  getProfile()
}
  • authorzation, Bearer 都是由这个项目的接口要求来定的