首页 > 其他分享 >vue路由守卫并向后台发送token

vue路由守卫并向后台发送token

时间:2023-02-26 10:58:24浏览次数:42  
标签:vue next token localStorage 路由 isAuthenticated

vue代码

//全局路由首位;当路由发生异常首先执行的方法
router.beforeEach((to, from, next) => {
  //是否被认证
  var isAuthenticated = false;
  //1.从localStorage获取用户的token 是否为空
  this.token = localStorage.getItem('token') //从localStorage获取用户的token
  //2.判断token是否为null ,为Null代表这个是用户未登录
  if (this.token != null) {
    var isAuthenticated = true;
    //需要在后台验证这个token是或正确
    axios.defaults.headers = {
      "token": this.token
    }
  }
  if (to.name !== 'login' && !isAuthenticated) next({ name: 'login' })
  else next()
})

  

标签:vue,next,token,localStorage,路由,isAuthenticated
From: https://www.cnblogs.com/xbinbin/p/17156240.html

相关文章

  • 缓存路由数据组件
    切换组件时组件会被销毁,如果想切页面还不会被销毁就使用<keep-alive></keep-alive>标签可以使展示的内容切换组件时不进行销毁如果只给路由占位符外写一个keep-alive那......
  • VUEX mapActions 和 mapMutations
     不使用mapActions和mapMutations的代码要用的地方字体放大了<template><divid="app"><h1>当前总数为:{{nbr}}</h1><h2>放大十倍总数为:{{bigSum}}......
  • VUEX getters 配置项
      获取bigSum<template><divid="app"><h1>当前总数为:{{$store.state.nbr}}</h1><h2>放大十倍总数为:{{$store.getters.bigSum}}</h2><select......
  • VUEX mapState 和 mapGetters的使用
       mapState:首先要在使用sore文件的文件引入:import{mapState}from'vuex';在js;红色的是用到的mapState可以自动生成计算属性   <script>import{mapState,m......
  • 编程式路由导航
    介绍:编程式导航就是给元素写事件,可以使用query或replace进行传递数据代码:<template><divclass="aboutone"><h1>我是Homeone</h1><ul>......
  • linux服务器双网卡路由设置
    最近在调试linux服务器双网卡配置时,会碰到内网不通的情况,这里记录一下注意事项。1.排查自身网络配置是否正确。     注意:双网口配置时,只配置一个网关即可(内网......
  • vue点击按钮后倒计时
    vue代码<template><div><!--点击按钮后倒计时--><el-button@click="signUp_asd"type="success":disabled="!show">获取验证码<spanv-s......
  • vue中获取网址上的参数
    vue代码<template><div><h4>http://localhost:8080/#/test?levels=level1-1</h4><h4>获取levels1-1</h4>levels={{levels}}</div></template><......
  • vue遍历数据
    vue代码<template><divclass="index"><!--遍历--><divv-for="(item,index)incatalogue":key="index"><!--页面跳转--><!--<route......
  • vue图片热区map-area定位(适应屏幕)
    vue代码<template><div>{{screenWidth}}{{screeHeight}}<divv-for="(item,index)inbook":key="index"><!--当从后台获取数据的时候可以进行......