首页 > 其他分享 >前端token是什么意思?怎么设置保存?应用场景?实现思路?

前端token是什么意思?怎么设置保存?应用场景?实现思路?

时间:2023-07-29 11:32:19浏览次数:41  
标签:axios 请求 登录 拦截器 前端 token 场景 store

token 的意思:

服务端生成的一串字符串,作为客户端进行请求的一个标识。

当用户第一次登录后,服务器生成一个 token 并将此 token 返回给客户端

以后客户端只需带上这个 token 前来请求数据即可,无需再次带上用户名和密码。

简单 token 的组成:

uid(用户唯一的身份标识)

time(当前时间的时间戳)

sign(签名token 的前几位以哈希算法压缩成的一定长度的十六进制字符串。防止 token 泄露)。

怎么统一设置token?

方法一:每次请求的时候手动添加:
axios({
   method: "",
   url: "",
   headers: {
     Authorization:"Bearer token"
   }
})
方法二:使用请求拦截器统一添加(常用)
在axios中设置统一的 token 请求模块
  import axios from axios
//在非组件模块中获取store必须通过这种方式
//这里单独加载store,和在组件中 this.Sstore一个东西
  import store from '@/store/
  const request =axios.create(
    baseURL:http://ttapiresearchitcast.cn/ // 基础路径
  })

// 请求拦截器
  request.interceptors.request.use(function (config)
  const{user}= store.state 
// 如果用户已登录,统一给接设置token信息
  if (user) {
    config.headersAuthorization = Bearer$(user.token)`
  }

//处理完之后一定要把config 返回,否则请求就会停在这里
  return configfunction (error)
  return Promisereject(error)
  })
//响应拦截器
//导出
export default request

存储token:

把token存储在本地和vuex中

应用场景:登录模块:

token失效的主动介入和被动介入:被动处理 (后端返回一个状态码 ->根据状态码->登出)

主动介入: (登录成功->记录时间戳->用token时先检查时间戳->如果超过时间->登出;

登录模块实现思路: Token作为用户登陆的唯一标识,存储在LocalStorage中,通过Vuex统一管理,并实现持久化。 在axios中设置请求拦截器,在每次请求的请求头中,注入token信息,作为登录的标识。 配合Vue-Router中的beforEach前置导航守卫函数,实现对token信息的统一监测和拦截登录。

主页token访问权限拦截-实现思路:初始化Vuex中的mutations信息,更新用户登录后的信息收集,封装action获取用户资料。封装action,实现用户退出登录,调用commit方法,清除Vuex中保存的token信息。根据后端检测token返回的状态码,设置拦截器,对失效token信息实现拦截登录,并提示用户token失败


标签:axios,请求,登录,拦截器,前端,token,场景,store
From: https://blog.51cto.com/u_15961699/6891414

相关文章

  • Django 之前端动态数据展示
    一、结合前端页面实现ORM对数据的增删改查1、修改和删除功能的逻辑'''修改功能的逻辑'''1、确定修改哪条记录,怎么确定?通过主键id确定唯一一条记录2、点击修改的按钮,应该跳转到一个修改的页面3、应该通过id查询到原来的数据,并且把这个记录的数据展示到修改的页面4、开始......
  • 前端跨平台调试代理神器Whistle
    概述抓包一直是平时开发中经常要做的,有一款好用的抓包工具可以让开发体验更棒,以前一直用fiddler,fiddler虽然强悍,但是入手有一定难度,而且较笨重,今天介绍另一款抓包工具:Whistle。Whistle是一款前端调试神器,通过拦截、修改和模拟网络请求,帮助开发人员调试接口、排查网络问题。它提......
  • 歌谣学前端之类笔记1
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣类笔记类*-类是对象的......
  • 歌谣学前端之类笔记2
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣类笔记2类中的所有代码都会......
  • 前端一些小case
    1,不规则图形加阴影或光圈 不用box-shadow:0010px#000 用 filter:dorp-shadow(0010px#000) 像素点做阴影 该dom对象不能为透明,透明不起作用2,书写方式writing-mode:horizontal-tb vertical-rl vertical-lr , 文字朝向 text-orientation:sidewaysupright3......
  • 多用户登录,提取token,传入下一个请求
     1.添加默认元件 2.添加临界部分控制器(有执行的顺序,先登录,后请求) 3.登录了提取token 4.下个接口加上token作为头管理器  配置持续时间: ......
  • 【selenium】获取token及session数据
    UI测试过程中遇到系统其他页面需要登录鉴权,不能每次打开页面都重新进行登录,所以需要保存登录用例时的tokendefsave_session(self,value):"""1.其中localStorage、token关键字是需要根据自己实际情况填写的localStorage:目标系统,需要查看自己的token是存在localStor......
  • mysql 的左连结 右边结 内连结 外连结和全连结的区别及使用场景举例
    在MySQL中,左连接(LEFTJOIN)、右连接(RIGHTJOIN)、内连接(INNERJOIN)、外连接(OUTERJOIN)和全连接(FULLJOIN)是常用的连接操作,用于联接多个表。这些连接操作的区别如下:左连接(LEFTJOIN):返回左表中的所有记录,以及与右表中匹配的记录。如果右表没有匹配的记录,则返回NULL值。左连接使用L......
  • mysql中子查询和连接操作的使用场景和区别是什么?请举例说明?
    MySQL中的子查询和连接操作都是用于联接多个表或查询结果,但它们有不同的使用场景和区别。子查询是指在一个查询中嵌套另一个查询,内部查询的结果作为外部查询的条件或数据源。子查询通常用于获取特定条件下的数据,或者用于计算某个字段的值。连接操作是指通过联接多个表来获取相关......
  • mysql中in的使用场景及用法举例说明?
    在MySQL中,IN运算符用于在WHERE子句中指定一个条件,以便从一个给定的列表中选择满足条件的值。IN运算符可以用于任何数据类型,包括数字、字符串和日期。下面是IN运算符的使用场景和用法的示例说明:使用IN运算符筛选特定值:查询订单表中订单状态为"已发货"或"已完成"的订单:SELECT......