为了防止用户未登录直接修改路径来访问页面,解决办法:

在main.js文件中加入以下代码:

// 路由拦截
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { //判断该路由是否需要登录
if (store.state.Token) { //vuex获取当前token是否存在
next();
} else {
Message({
showClose: true,
message: '请先登录!',
type: "warning"
});
next({
path: '/login',
query: { redirect: to.fullPath } //将跳转的路由path作为参数,登录成功后跳转该路由
})
}
} else { //无需登录直接跳转页面
next();
}
})

在需要拦截的路由中添加:

26、router.beforeEach路由拦截的更多相关文章

  1. Vue+axios(interceptors) 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果

    axios interceptors 拦截器 //interceptors.js // vue axios配置 发起请求加载loading请求结束关闭loading // http request 请 ...

  2. router.beforeEach、路由元信息、导航守卫与函数式编程

    一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...

  3. vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  4. 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  5. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

  6. vue+axios完美实现前端路由拦截

    一.路由拦截 1.首先在router的index.js里配置一个自定义字段requireAuth,用该字段来判断进入该路由是否需要登录.如果已经登陆则进入该路由,反之则进入登录页面. 如图是路由配置: ...

  7. vue 路由拦截、axios请求拦截

    路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...

  8. 「Vue」登陆-路由拦截器

    1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.stat ...

  9. vue-router做路由拦截时陷入死循环

    今天分享一下使用vue-router做路由拦截时遇到的坑. 需要提前了解的api 1:router.beforeEach( to , from ,next) ; to: Route: 即将要进入的目标 ...

随机推荐

  1. 水晶报表 VS2010 应用

    VS.NET2010水晶报表安装部署[VS2010]   欢迎C#高手加盟QQ群:9340166 水晶报表VS2010版IDE安装标准版SAP Crystal Reports, version for ...

  2. 【MyEclipse】安装svn插件

    svn插件包下载:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 重启myeclipse 看import就 ...

  3. SDOI2010选做

    Round1 D1T1外星千足虫 \(BSOJ2793\)--高斯消元解异或方程组 简述 有\(n\)个数\(\{a_i\}\) 给出\(m\)个信息,每个信息给出\(\displaystyle{(\ ...

  4. 直接插入排序与缩小增量插入排序(希尔排序ShellSort)

    直接插入排序 要理解shell排序,首先要把直接插入排序的基础打扎实. 学习资料:白话经典算法系列之二 直接插入排序的三种实现.直接插入排序 根据我的思路,直接插入排序设置3重循环. 循环1:对 i= ...

  5. T2:中间值(median)———2019.10.15

    代码: #include <bits/stdc++.h> int ri() { , f = ; ; ) + (x << ) - ' + c; return x * f; } ; ...

  6. CF1174E Ehab and the Expected GCD Problem(DP,数论)

    题目大意:对于一个序列,定义它的价值是它的所有前缀的 $\gcd$ 中互不相同的数的个数.给定整数 $n$,问在 $1$ 到 $n$ 的排列中,有多少个排列的价值达到最大值.答案对 $10^9+7$ ...

  7. mongodb连接认证失败

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

  8. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

  9. go 优秀文档

    go语言资料汇总 : https://blog.zhnytech.com/articles/2016/07/15/Golang%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99% ...

  10. 关于MySQL 通用查询日志和慢查询日志分析(转)

    MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...