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

在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. 架构篇 | LAMP 架构应用案例 - 部署 PHPMyAdmin 系统(二)

    作者 | JackTian 微信公众号 | 杰哥的IT之旅(ID:Jake_Internet) 转载请联系授权(微信ID:Hc220066)备注:来自博客园 1.什么是 phpMyadmin 系统? ...

  2. 【java异常】It's likely that neither a Result Type nor a Result Map was specified

    错误原因:mybatis配置文件没有返回类型参数 resultType 解决办法:resultType= 添加

  3. 机器学习-MNIST数据集-神经网络

    #设置随机种子 seed = 7 numpy.random.seed(seed) #加载数据 (X_train,y_train),(X_test,y_test) = mnist.load_data() ...

  4. Pandas | 19 合并/连接

    Pandas具有功能全面的高性能内存中连接操作,与SQL等关系数据库非常相似.Pandas提供了一个单独的merge()函数,作为DataFrame对象之间所有标准数据库连接操作的入口 - pd.me ...

  5. Http 状态码(Status Codes)

    七.状态码(Status Codes)*服务器向用户返回的状态码和提示信息,常见的有以下一些(方括号中是该状态码对应的HTTP动词).200 OK - [GET]:服务器成功返回用户请求的数据,该操作 ...

  6. Kaggle实战——点击率预估

    https://blog.csdn.net/chengcheng1394/article/details/78940565 原创文章,转载请注明出处: http://blog.csdn.net/che ...

  7. E437: terminal capability "cm" required 解决办法

    E437: terminal capability "cm" required 这个错误一般是环境变量TERM没有配置或者配置错误所致. 解决办法: 执行export TERM=x ...

  8. Git/SVN提交代码规范

    feat - 新功能 feature fix - 修复 bug docs - 文档注释 style - 代码格式(不影响代码运行的变动) refactor - 重构.优化(既不增加新功能,也不是修复b ...

  9. git clean解决 GIT error: The following untracked working tree files would be overwritten

    git clean用法:https://www.cnblogs.com/lsgxeva/p/8540476.html :

  10. PHP正则匹配网址

    /** * @param $url 网址 * @return bool */ public static function checkUrl($url){ $pattern="/^(http ...