web项目开发中2个Token原因解析及示例代码

2024-12-09 23:02:11

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { getToken, setToken } from './token'
import router from '../router/index.js'
import { Toast } from 'vant'
Vue.use(VueAxios, axios)
const instance = axios.create({
  baseURL: '基地址',
  timeout: 100000
})
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 统一添加token
    getToken() && (config.headers['Authorization']= `Bearer ${getToken().token}`)
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
// 添加响应拦截器
/**
 * 1.if 401 else 不管
 * 2.if 有token else 跳转登录页
 * 3.try-catch 用 refresh_token 去获取 token, if 成功 else refresh_token失效了,跳转登录页
 * 4.保存获取的 token, 更新, 继续执行用户要的操作
 */
instance.interceptors.response.use(
  function (response) {
    return response
  },
  async function (error) {
    if (401 === error.response.status) {
      setTimeout('console.clear()', 2000)
      if (getToken()) {
        try {
          // 登录了, 但是短T过期, 用长T获取短T(刷新用户token)
          let res = await axios({
            url: '基地址/v1_0/authorizations',
            method: 'PUT',
            headers:{Authorization : `Bearer ${getToken().refresh_token}`}
          })
          // 更新短T
          let token = getToken()
          token.token = res.data.data.token
          setToken(token)
          // 继续用户操作
          return instance(error.config)
        } catch (error) {
          // 长T失效,跳转登录页
          Toast.fail('请先登录')
          router.push({ path: '/login' })
        }
      } else {
        // 未登录,跳转登录页
        Toast.fail('请先登录')
        router.push({ path: '/login' })
      }
    }
    return Promise.reject(error)
  }
)
export default instance

以上就是web项目开发中2个Token原因解析及示例代码的详细内容，更多关于web项目开发的资料请关注我们其它相关文章！

Vue中登录验证成功后保存token,并每次请求携带并验证token操作

在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回一个token值,用loaclStorage保存 localStorage.setItem('token',res.data.token) 在main.js中设置全局请求头和响应回来的判断 //设置axios请求头加入toke
ssm项目实现用户登陆持久化(token)

用户登录持久化就是每次访问不用账号密码来校验身份,在用户登录第一次之后会返回一个token字符串,之后的访问客户端将这个token加到请求体里发给服务器就可以验证身份了. 利用Jedis和JWT创建用户token 1.JWT创建token maven依赖: <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version>3.3.0
在vue中获取token,并将token写进header的方法

需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d
Vue 拦截器对token过期处理方法

最近在做的一个项目,需要每个http请求下都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. Vue.http.interceptors.push(function (request, next) {//拦截器设置请求token // sessionStorage.getItem("tokenUrl"); request.headers.set('token', sessionStorage.getItem("tok
基于vue 实现token验证的实例代码

vue-koa2-token 基于vue的做了token验证前端部分(对axios设置Authorization) import axios from 'axios' import store from '../store' import router from '../router' //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios.defaults.headers.post['Content-Type'] =
详解vue项目中使用token的身份验证的简单实践

工作原理前端页面进行登录操作, 将用户名与密码发给服务器; 服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端前端将token保存在本地中, 建议使用localstorage进行保存. 下次对服务器发送请求时, 带上本地存储的token 服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端为通过则返回错误码, 提示保错信息, 然后跳转到登录页. 具体步骤所用技术: vuex + ax
web项目开发中2个Token原因解析及示例代码

目录问题: 项目中2个Token, 一个时效2个小时(简称:短Token), 另一个时效14天(简称:长Token), 为什么要用2个Token? 解答: 1.基于安全性, 防止Token泄露的考虑, 服务器资源中所有的请求都只能使用短Token, 并且短Token只有2小时时效; 这个方法依然无法完全解决防止Token泄露的问题, 只是在一定程度上提高防止Token泄露的安全性; 长Token的作用只有一个, 就是短Token时效了的时候, 用长Token去请求获取新的短Token, 只有这
WinForm项目开发中WebBrowser用法实例汇总

本文实例汇总了WinForm项目开发中WebBrowser用法,希望对大家项目开发中使用WebBrowser起到一定的帮助,具体用法如下: 1. [PermissionSet(SecurityAction.Demand, Name = "FullTrust")] [ComVisibleAttribute(true)] public partial class frmWebData : Form { public frmWebData() { InitializeComponent();
Android开发中requestfocus()无效的原因及解决办法

前言最近做公司项目的时候,经常会遇到一个问题,就是我为某个控件如EditText设置requestfocus()的时候不管用,比如说登陆的时候,我判断下用户输入的密码,如果正确就登陆,错误就提示密码错误,并且输入框获取焦点,但是实际中确不起作用 package com.example.hfs.requestfocusdemo; import android.content.Intent; import android.support.v7.app.AppCompatActivity; impo
web项目开发VUE的混入与继承原理

目录混入混入注意(重名情况) 局部混入全局混入定义及全局注册调用继承混入和继承的区别混入将多个vue文件内重复使用的功能代码,提取成单个js文件,在需要使用的地方进行调用即可. 在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data .methods.components等所有<script>中可以定义的代码. 混入注意(重名情况) 组件中的 data变量名和混入中的 data变量名, 发生重名时, 以组件为准; 组件中的 methods,comput
Python Web后端开发中的增查改删处理

目录前言一.创建 mgr应用目录二.添加处理请求模块和 url 路由 2.1定义函数 1.新建customer文件,定义dispatcher函数 2.总路由文件 bysms/urls.py 中定义 3.mgr下添加 urls.py 路由文件三.列出客户四.添加客户五.临时取消 CSRF 校验六.修改客户信息七.删除客户八.和前端集成前言如果采用前后端分离的架构开发, 后端几乎不负责任何展现界面的工作,只负责对数据进行管理 . 数据的管理,主要就是:响应前端的请求, 对数据
web前端开发中常见的多列布局解决方案整理(一定要看)

多列布局多列布局在web前端开发中也是较为常见的,比如常见的三列.四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容.这里会提到的多列布局有两列定宽加一列自适应.多列不定宽加一列自适应.多列等分三种. 两列定宽加一列自适应布局本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变.简易实现代码如下: 两列定宽加一列自适应本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现.需要注
WEB 前端开发中防治重复提交的实现方法

web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的不好,甚至影响到整个系统的安全性.而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦.下面就来讲讲如何有效避免前端的表单重复提交表单提交有以下几种方式: <form name="form" method="post" action=&qu
THINKPHP项目开发中的日志记录实例分析

本文实例讲述了THINKPHP项目开发中的日志记录用法.分享给大家供大家参考.具体方法如下: 1.建立日志表复制代码代码如下: CREATE TABLE `logs` ( `id` int(11) NOT NULL auto_increment, `guid` varchar(100) character set utf8 NOT NULL, `addtime` timestamp NOT NULL default CURRENT_TIMESTAMP, `accoun
WinForm项目开发中NPOI用法实例解析

本文实例展示了WinForm项目开发中NPOI用法,对于C#初学者有一定的借鉴价值.具体实例如下: private void ExportMergeExcel() { if (File.Exists(templateXlsPath)) { int i = 4, _recordNo = 1; using (FileStream file = new FileStream(templateXlsPath, FileMode.Open, FileAccess.Read)) { HSSFWorkbook
vue项目开发中setTimeout等定时器的管理问题

一.问题来源. 在项目中,我们经常有这样的需求,一个页面初始化后,需要不断的去请求后端,来获取当前某个记录的最新状态. 显然,这个可以用setTimeout以及回调中继续setTimeout来实现. 我们假设定时器是在页面#/test/aaa上创建的. 但是,会遇到以下两个问题,我从#/test/aaa 这个页面切换到 #/test/bbb页面后如果停留在#/test/bbb,定时器还在跑. 其次,如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换,而且切换时

web项目开发中2个Token原因解析及示例代码

目录

相关推荐

随机推荐