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

在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. rf增加产品的例子

    Open Browser http://xxx.xxx.xxx.xxx:1000/portal/login/init.htm gcMaximize Browser Window sleep 2 #Ge ...

  2. django 修改 request 对象中的请求参数, 并重新赋值给 request 对象

    直接上代码, 实现流程看代码及注释 def your_view(self, request): method = request.method if method == "GET" ...

  3. 小学四则运算口算练习app---No.2

    经过昨天的了解,虽然还是很懵,总要下手摸到鼠标来写第一个页面! 这是一开始设置出体数目和时间的页面,使用者根据提示进行相关设置即可! 代码如下: <?xml version="1.0& ...

  4. Nginx on Docker 配置

    docker run -d -p 8082:8082 --name two-nginx -v ~/workplace/nginx/html:/usr/share/nginx/html -v ~/wor ...

  5. clojure 环境搭建

    以下是clojure 基础环境搭建的几种方式 mac brew install clojure linux curl -O https://download.clojure.org/install/l ...

  6. 30-ESP8266 SDK开发基础入门篇--SPI

    这节只是做记录, 整个的教程呢,重新整理下 教程有点乱,需要再细分一下 这节只是做一下我使用其SPI的记录 还是老样子,看人家LUA源码里面怎么使用的 注意哈,对于8266 SDK的学习我还是建议大家 ...

  7. [RN] React Native 定义全局变量

    React Native 定义全局变量 React Native全局变量的两种使用方式 一.导出和导入 // 定义的页面 global.js var global = {authorization: ...

  8. ASP.NET Core 简介

    .NET Core 是 .NET Framework 的新一代版本,是微软开发的第一个具有跨平台 ( Windows.Mac OSX .Linux ) 能力的应用程序开发框 ASP.NET Core ...

  9. C 题解———2019.10.16

    现在很痛苦,等过阵子回头看看,会发现其实那都不算事. [题目描述]定义一个排列 a 的价值为满足|a[i]-i|<=1 的 i 的数量.给出三个正整数 n,m,p,求出长度为 n 且价值恰好为 ...

  10. LOJ6625 时间复杂度(min_25筛)

    本人在LOJ的第三题(前两题太水不好意思说了QwQ),欢迎大家踩std. 题目链接:LOJ 题目大意:定义函数 $f$:($minp$ 表示最小质因子) $$f(x)=\begin{cases}0&a ...