vue路由守卫并向后台发送token
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路由守卫并向后台发送token的更多相关文章
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- vue路由守卫用于登录验证权限拦截
vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...
- Vue | 路由守卫面试常考
前言 最近在整理基础,欢迎掘友们一起交流学习 结尾有彩蛋哦! Vue Router 路由守卫 导图目录 路由守卫分类 全局路由守卫 单个路由守卫 组件路由守卫 路由守卫执行的完整过程 路由守卫分类 全 ...
- vue路由守卫应用,监听是否登录
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...
- Vue路由守卫(跳转页面置顶的处理方)
在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...
- vue路由守卫
路由守卫 //路由进来之时 beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined ...
- vue路由守卫触发顺序
不同组件之间的路由跳转流程图 导航被触发(A–>B) 调用A组件内路由守卫beforeRouteLeave(to,from,next) 调用全局路由前置守卫router.beforeEach(t ...
- vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫
上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...
- Vue路由守卫之路由独享守卫
路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 ...
- Vue路由守卫之组件内路由守卫
beforeRouteEnter,进入路由前.需要注意这里不能使用this,因为我们使用的是进入路由之前,那会组件还没创建,得不到this这个属性,所有我们只能使用过vm异步语句来让 ...
随机推荐
- vue3 生成二维码 qrcodejs2-fix
1.安装qrcodejs2-fix npm install qrcodejs2-fix 2.引入qrcodejs2-fix import QRCode from 'qrcodejs2-fix'; 3. ...
- windows环境go安装和goland激活
1. go环境安装 1.1. go安装包下载 https://golang.google.cn/dl/ https://studygolang.com/dl 1.2. 安装go环境 1.2.1. 点击 ...
- vue3中使用vite-ts构建项目时tsconfig.json的配置
在上一次创建vue3项目在tsconfig.json中配置了文件别名以后,格式校验提示 es3什么鬼,便去看了一下tsconfig.json的配置,以此学习 { "compilerOptio ...
- 计算机意外地重新启动或遇到错误windows安装无法继续解决方法
计算机意外地重新启动或遇到错误windows安装无法继续解决步骤如下: 当win10在安装过程中一直卡在"海内存知己,天涯若比邻"时同样实用 解决方法: 按住shift+f10(或 ...
- pandas用到的知识点总结
pandas中文学习官网地址 https://www.pypandas.cn/ 我自己用到的知识点汇总 基础版: dates = pd.date_range('20130101', periods=6 ...
- 51定时器:0xee的由来
定时时间=(65536-初值)×(12/晶振频率) 因为51实验板的晶振为11.0592,所以 定时时间=(65536-初值)×(12/11.0592) 定时1ms:1000=(65536-初值)×( ...
- vue验证码倒计时60s
vue3验证码倒计时60s //倒计时60s const timeNum = ref(60); const countDown = ref(); const isShowSend = ref(true ...
- 替代学习物联网-云服务-01百度云MQTT
1.登录百度智能云 2.进入 物联网接入 https://console.bce.baidu.com/iot2/core/core/list https://iotcore-dev-tool.gz ...
- react native 使用什么本地存储(asyncStorage 或者 H5的LocalStorage)
1. 官方文档上面 已经废弃 ,官方建议@react-native-community/async-storage代替.我看了这个确实写起来很麻烦,果断不使用了 2. 之后我使用 react-nati ...
- PulADC驱动设计
Ref大电容10uF,X5R或钽电容,不建议NPO 参考信号的驱动(高能输出基准源,或者运放),低阻抗,大SlowRate,小建立时间:: ADA4841-1, AD8021, ADA4899-1, ...