vue加token_宝儿的程序生涯的博客-程序员宅基地_vue添加token

技术标签: vue  

今天遇到一个问题:登录了还一直让我去登录
在这里插入图片描述
我才知道是需要给请求头加上token
王哥说
token 就是你登录的时候返回给你的数据
这个token 你需要登录后 存起来
然后 再开一个拦截器,每次访问请求的时候 都把这个token 加到请求头里面去
不开拦截器的话 你就要在代码中 手动给你要发送的请求的请求头中 加上token
然后我就去查如何 Vue 如何给请求带上请求头 | 如何带上token

可以在登陆的时候获取token,然后存起来,在拦截器里面判断是否有你的token,有就统一加上呗

每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized–未授权 ,让用户重新登录。

深入理解token

为什么用token?
Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化(比如存入数据库),那它就是一个永久的身份令牌。

需要为 Token 设置有效期吗?

token和localstorage的结合

axios.interceptors.request.use(function (config) {
    
  let userInfo = localStorage.getItem('userInfo')
  let token = ''
  if (userInfo != undefined && userInfo.length > 10) {
    
    userInfo = JSON.parse(userInfo)
    if (userInfo.token) {
    
      token = userInfo.token
    }
  }
  //
  // if (config.url.indexOf(url) === -1) {
    
  //   config.url = url + config.url /* 拼接完整请求路径 */
  // }
  // config.url = config.url.replace(/\/\//, '/')

  config.withCredentials = true
  config.headers = {
    
    'token': token
  }
  return config
}, function (error) {
    
  return Promise.reject(error)
})
axios.defaults.timeout = 30000 // 超时时间
axios.interceptors.response.use(function (response) {
    
  // token 已过期,重定向到登录页面
  if (response.data.status === 401) {
    
    localStorage.clear()
    router.replace('/')
  }
  return response
}, function (error) {
    
  if (error.message.includes('timeout')) {
     // 判断请求异常信息中是否含有超时timeout字符串
    return {
     data: {
     'status': 601 } }
  }
  // Do something with response error
  return Promise.reject(error)
})

方法1:
vuex + axios 做登录验证 并且保存登录状态


方法2:
在vue中如何获取token,并将token写进header
代码不一定,有几个报错的地方:

问:.vue文件如何引入store
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
login.vue

this.$axios({
    
  method: 'post',
  url: '/api/user/login',
  data: params
}).then(res => {
    
  console.log('登录成功')
  console.log(res)
  // 根据store中set_token方法将token保存至localStorage/sessionStorage中,data["Authentication-Token"],获取token的value值
  this.$store.commit('set_token', data["Authentication-Token"])
  if (store.state.token) {
    
    this.$router.push('/person')
    console.log(store.state.token)
  } else {
    
    this.$router.replace('/login')
  }
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    
  state: {
    
    token: ''
  },
  mutations: {
    
    set_token (state, token) {
    
      state.token = token
      sessionStorage.token = token
    },
    del_token (state) {
    
      state.token = ''
      sessionStorage.removeItem('token')
    }
  },
  actions: {
    
  },
  modules: {
    
  }
})

main.js

import Vue from 'vue'
import './cube-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import Cube from 'cube-ui'

Vue.use(Cube)
Vue.prototype.$axios = axios
Vue.config.productionTip = false
// 定义全局默认配置
axios.defaults.headers.common['Authentication-Token'] = store.state.token

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    
  // 在发送请求之前做些什么
  // 判断是否存在token,如果存在将每个页面header都添加token
  if (store.state.token) {
    
    config.headers.common['Authentication-Token'] = store.state.token
  }
  return config
}, function (error) {
    
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    
  // 对响应数据做点什么
  return response
}, function (error) {
    
  // 对响应错误做点什么
  if (error.response) {
    
    switch (error.response.status) {
    
      case 401:
        this.$store.commit('del_token')
        router.replace({
    
          path: '/login',
          query: {
     redirect: router.currentRoute.fullPath }// 登录成功后跳入浏览的当前页面
        })
    }
  }
  return Promise.reject(error)
})

new Vue({
    
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import member from '../views/member.vue'

Vue.use(VueRouter)

const routes = [
  {
    
    path: '/',
    name: 'login',
    component: Login
  },
  {
    
    path: '/person',
    name: 'person',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/person.vue')
  },
  {
    
    path: '/member',
    name: 'member',
    component: member
  }
]

// 页面刷新时,重新赋值token
if (sessionStorage.getItem('token')) {
    
  store.commit('set_token', sessionStorage.getItem('token'))
}

const router = new VueRouter({
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {
     // 这里的requireAuth为路由中定义的 meta:{
    requireAuth:true},意思为:该路由添加该字段,表示进入该路由需要登陆的
    if (store.state.token) {
    
      next()
    } else {
    
      next({
    
        path: '/login',
        query: {
     redirect: to.fullPath }
      })
    }
  } else {
    
    next()
  }
})

export default router

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fengtingYan/article/details/103410220

智能推荐

UIAlertView和UIAlertControl_weixin_34384915的博客-程序员宅基地

iOS 8的新特性之一就是让接口更有适应性、更灵活,因此许多视图控制器的实现方式发生了巨大的变化。全新的UIPresentationController 在实现视图控制器间的过渡动画效果和自适应设备尺寸变化效果(比如说旋转)中发挥了重要的作用,它有效地节省了程序员们的工作量(天地良心啊)。还有,某 些旧的UIKit控件也同样发生了许多变化,比如说Alert Views、Action Sheets、...

CPU卡文件_「已注销」的博客-程序员宅基地

一般来说,对存储卡和逻辑加密卡操作,使用接触式IC卡通用读写器;对CPU卡使用CPU卡读写器。所谓“通用读卡器”是指它可以对大多数流行的存储卡和逻辑加密卡操作。而CPU卡由于有ISO/IEC 7816.3/4的规范,其通讯协议、命令格式都是兼容的,被看作是一种卡。当然,也有将“通用读卡器”与CPU读卡器二合一的真正的接触式通用读卡器。   PC端IC卡应用软件编程,要点是了解卡的数据结构和

1.并发编程多进程(理论部分)_changxin7的博客-程序员宅基地

文章目录一 什么是进程二 进程与程序的区别三 并发与并行四 同步\异步and阻塞\非阻塞(重点)五 进程的创建(了解)六 进程的终止(了解)七 进程的层次结构八 进程的状态九 进程并发的实现(了解)一 什么是进程​ 进程:正在进行的一个过程或者说一个任务。而负责执行任务则是cpu。​ 举例(单核+多道,实现多个进程的并发执行):​ 太白金星在一个时间段内有很多任务要做:p...

linux 日志自定义模板,haproxy json 自定义格式日志 并用rsyslog 收集_vjcdtstcjj的博客-程序员宅基地

haproxy的配置日志投送:globallog127.0.0.1 local1 info默认端口是udp514默认日志:defaultslog globallog-format \"local_time\":\"%t\",\"log_type\":\"tcp_log\",\"frontend_name\":\"%f\",\"hostname\":\"%H\",\"clientip\":\...

狂神说--mybatis笔记整理_小小酒馆的掌柜的博客-程序员宅基地_狂神mybatis笔记

Mybatis01-CRUD目录结构java文件实体类Student.java:public class Student { private Integer id; private String name; private Date birthday; set() get() toString()}接口StudentMapper.java:public interface StudentMapper { public List<Stude

一个Java系统架构师最终的规划 时间两年后_BLUE100001的博客-程序员宅基地

【5】一个java系统架构师具备的要求:详细如下:第5阶段(Java系统架构师) - 23种设计模式、UML建模、架构实战、大型电商分布式系统应用实践    - 501 23种设计模式       -01-策略模式       -02-观察者模式       -03-装饰者模式       -04-单例模式       -05-工厂模式       -06-命令模式    ...

随便推点

2018年中南大学机试题D题_Bep_的博客-程序员宅基地

2018年中南大学机试题D题题目链接题目描述猪年快乐!在这个快乐的日子里我们当然要去超市买可乐喝啦!现在超市有n种可乐,第 i 种可乐的价格为C[i] ,体积为 2i-1 毫升,每种可乐都是无限供应的 ,现在你想买至少 L毫升的可乐 ,作为一个省钱小能手,聪明的你能够想到最少要花多少钱吗?输入输入包含多组测试用例。每组测试用例第一行包含两个数字 n 和 L (1 ≤ n ≤ 30; ...

Git代码管理_diaozhu2233的博客-程序员宅基地

持续更新中。。。 有道笔记链接:http://note.youdao.com/noteshare?id=10a0a86a3499f92cf26371f2698b97d2Git网上平台Git客户端Git教程分支管理策略任务分配策略Git网上平台码云 http://git.oschina.net/ 开源中国( https://www.oschin...

Linux系统CentOS 7下载安装Hadoop以及初步配置_雨打芭蕉的博客-程序员宅基地

      基于当前大数据火爆的就业前景,开始琢磨Hadoop相关的知识,本文用于记录学习Hadoop开发环境配置中的步骤,帮助自己以及有需要的其他人。本文的采用的是传统的解压包方式和Linux标准命令方式,本文记录的只是Hadoop相关安装配置(不包含JDK),配置的基本环境是Linux版本为CentOS 7,Hadoop版本为Hadoop2.8.0,Linux编译器Xshell5。1、下载Ha...

劫持系统函数Demo_WaltonWang的博客-程序员宅基地

以下内容是劫持glib.c中标准printf函数的方法。是这篇 Docker容器内的监控命令数据修正思路的基础知识。对LD_PRELOAD熟悉可以不看。

计算机硬件的选购与组装实验报告,计算机硬件的组装实验报告 (精选可编辑)..._科技松鼠会的博客-程序员宅基地

《计算机硬件的组装实验报告 (精选可编辑)》由会员分享,可在线阅读,更多相关《计算机硬件的组装实验报告 (精选可编辑)(4页珍藏版)》请在金锄头文库上搜索。1、计 算 机 硬 件 的 组 装实验时间:3月30日晚6:00-9:00 学号: 姓名: 一、实验目的1.加深对理论知识的理解,提高实际动手能力;2.了解计算机的主要部件,理解各部件的功能,了解微型机的各项技术指标和参数。3.能掌握现代计算机...

php apache 404,如何从PHP显示默认的Apache 404_owl-ler的博客-程序员宅基地

我环顾四周,并没有发现任何有关我需要的问题 .我想做一个类似“admin.php”的东西,但我想在条件不对的情况下返回404 . 但是,与404页面的其余部分看起来不同的404将向攻击者暗示“admin.php”是真实文件 .我不想制作自己的自定义404页面,我认为Apache的默认404对我来说已经足够了 . 如何发送404触发apache以发送已经错误的文档 . 我认为这个错误文档在搜索之后位...