如何保存token-localStorage存储

2023-05-16

1、原理
原理是通过vue-router的beforeEach钩子,在每次路由到一个地址的时候先判断该路由是否携带了meta信息,且该信息中的requireAuth是否为true,如果为true表示该路由是需要身份验证的。则去localStorage找token,若token不存在则表示用户无认证,去登录请求token。若token存在则拿着token去请求。
2、token保存
login.vue文件中代码: 
methods: {
  handleLogin (data) {
    api.AuthResource.save(data).then(response => {
      if (!response.ok) {
        console.log('登录失败')
      }
      const token = response.data.token
      window.localStorage.setItem('token', token)
      window.location.pathname = '/'
    }, response => {
      console.log('登录失败')
    })
  }
}
3、拦截器
api.js文件中代码:
Vue.http.interceptors.push((request, next) => {
  if (window.localStorage.getItem('token')) {
    Vue.http.headers.common['Authorization'] = 'zhangsan' + window.localStorage.getItem('token')
  }
  next((response) => {
    if (response.status === 401) {
      del('token')
      window.location.pathname = '/login'
    }
  })
})
4、路由器
routers.js文件中代码:
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: require('./views/Home'),
    meta: {
      requiresAuth: true
    }
  },
]

const router = new VueRouter({
  routes: routes
})

router.beforeEach((to, from, next) => {
  let token = window.localStorage.getItem('token')
  if (to.matched.some(item => item.meta.requiresAuth) && (!token || token === null)) {
    next({
      path: '/login',
      query: { redirect: to.path }
    })
  } else {
    next()
  }
})

export default router

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何保存token-localStorage存储 的相关文章

随机推荐

  • MySQL 服务的启动和停止

    4 MySQL 服务的启动和停止 mysql数据库启停 头疼小宇的博客 CSDN博客
  • 相机投影矩阵的计算

    摄像机标定 Camera calibration 中存在的一个关键问题 xff1a 如何求解投影矩阵有了投影矩阵 xff0c 我们便可以把世界坐标系变化到图像坐标系 一 最小二乘法 已知条件 n个三维世界坐标点 保存在dat文件中 n个二维
  • 相机投影矩阵计算

    代码如下 A 3 1 1 1 2 4 1 4 5 B 3 6 2 1 1 4 x1 A B x2 inv A B x3 linsolve A B x1 x2 x3 solve 3 x1 x2 x3 3 6 x1 2 x2 4 x3 2 1
  • Docker EEDocker CE简介与版本规划

    Docker EEDocker CE简介与版本规划 更多干货 分布式实战 xff08 干货 xff09 spring cloud 实战 xff08 干货 xff09 mybatis 实战 xff08 干货 xff09 spring boot
  • 浏览器相关知识点总结

    今天说说浏览器相关问题 xff1a 常见的浏览器内核 xff0c 参见下表 xff1a 浏览器 RunTime内核 xff08 渲染引擎 xff09 JavaScript 引擎ChromeBlink xff08 28 xff09 Webki
  • 图像处理与计算机视觉网址导航

    1常用网站 20条常用网站网址 xff0c 更多点此 Google xff08 gfsoso xff09 直达 计算机视觉网 直达 增强现实资讯 直达 开源中国社区oschina 直达 百度搜索 直达 小木虫 xff0c 学术科研第一站 直
  • 服务器分布式部署和集群部署的区别

    服务器分布式部署和集群部署的区别 1 分布式部署 分布式是以缩短单个任务的执行时间来提升效率的 xff1b 分布式是将不同的业务分布在不同的地方 xff1b 2 集群部署 集群是将几台服务器集中在一起 xff0c 实现同一业务 xff1b
  • Vue知识点:qs

    一 qs是什么 xff1f qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库 可以进行对象与字符串之间的一个转换 二 qs的安装 qs xff0c 是axios中自带的 xff0c 也是npm仓库所管理的包 安装方式 xff1
  • Vue点击按钮跳转页面的实现方法

    1 跳转外部链接并覆盖当前页 lt el button type 61 34 primary 34 64 click 61 34 cimsInputClick 34 gt 应用入口 lt el button gt cimsInputClic
  • 警告C4819 解决办法

    问题 警告C4819 该文件包含不能在当前代码页 936 中表示的字符 请将该文件保存为 Unicode 格式以防止数据丢失 解决办法 1 如果调用的库为C语言 xff0c 增加extern 34 C 34 extern表明变量或函数是ex
  • fopen和fopen_s简介

    1 fopen函数 xff08 1 xff09 定义 FILE fopen const char filename const char mode r 打开只读文件 xff0c 该文件必须存在 r 43 打开可读写的文件 xff0c 该文件
  • 用Photoshop进行icon的制作或将其它格式图片转成icon

    用Photoshop进行icon的制作或将其它格式图片转成icon 1 准备 1 安装的ps格式里没有ico xff0c 需要安装插件 ICOFormat 8bi xff0c 搜索 ICOFormat 8bi 并根据PC选择下载 xff1b
  • dataGridVie控件绑定List<T>数据

    1 实现功能 dataGridVie控件绑定List数据 xff0c 点击按钮更新List数据并重新绑定 xff0c dataGridVie控件的数据更新 2 编程步骤 xff08 1 xff09 定义Person类 span class
  • VS2019安装、卸载及升级程序打包过程

    1 安装打包工具 在VS2019界面点击扩展菜单下的管理扩展 xff0c 如果已安装Microsoft Visual Studio Installer Project xff0c 则如下图所示 如果没有安装则选择联机 xff0c 进行下载安
  • Modbus TCP协议

    1 Modbus协议 Modbus是一种工业总线协议标准 xff0c 包括ASCII RTU TCP三种报文类型 xff0c 其物理层接口有RS 232 RS 485 RS 422 及以太网 xff0c 采用主 从方式进行通信 2 Modb
  • C#文件拷贝的方法

    1 实现功能 xff1a 打开的文件夹如果和目标文件夹不一样 xff0c 则将文件拷贝到目标文件夹 span class token class name span class token keyword string span span
  • WPF控件样式设置

    1 直接在代码中设置 span class token operator lt span span class token class name Button span Content span class token operator 6
  • C#多线程日志的实现

    1 定义输出目标类型 span class token keyword public span span class token keyword enum span span class token class name LogTarget
  • The power input for PSU 2 is lost

    错误信息 Dell戴尔 PowerEdge R720 服务器错误 xff1a PSU0003 Power input for PSU 2 is lost Please check PSU cables 这个错误信息为 xff1a PSU 2
  • 如何保存token-localStorage存储

    1 原理 原理是通过vue router的beforeEach钩子 xff0c 在每次路由到一个地址的时候先判断该路由是否携带了meta信息 xff0c 且该信息中的requireAuth是否为true xff0c 如果为true表示该路由