vue-router判断页面未登录时，自动跳转到登录页

1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录

下面的两个页面，登录页不需要检测，首页需要检测

const routers = [
{path: '/',component: App,children: [{ path: '/login', component: Login,meta: {title: '登录'}},{ path: '/home', component: Home,meta: {title: '首页',requireAuth: true}}]
}
]
export default routers

2.main.js

返回遍历的某个路由对象，我们定义为record，检测这个对象是否拥有meta这个对象，如果有meta这个对象，检测meta对象是不是有requireAuth这个属性且为true

检测到需要登录权限后，我的做法是请求接口判断用户是否登录

如果未登录，跳转到登录页面；如果已经登录，确保要调用next()方法，否则钩子就不会被resolved

router.beforeEach((to, from, next) => {/* 页面title */if (to.meta.title) {document.title = to.meta.title}/* 判断该路由是否需要登录权限 */if (to.matched.some(record => record.meta.requireAuth)) {//是否登录axios.post('/home/user/isLogin').then(function (response) {if (response.data.code == 0) {//未登录if (response.data.data.online == 0) {next({path: '/login',})} else {//已登录
                    next()}}}).catch(function (error) {// Toast(error.data.msg);
        });}next();
})

转载于:https://www.cnblogs.com/liuqianrong/p/9518741.html

vue-router判断页面未登录时，自动跳转到登录页相关推荐

php拦截登录页面跳转页面,PHP未登录自动跳转到登录页面
PHP未登录自动跳转到登录页面下面一段代码给大家分享php未登录自动跳转到登录页面,具体代码如下所示: namespace Home\Controller; use Think\Controller ...
Nuxt.js - 最新自定义报错、缺省、404、500 定制化 error.vue（页面、接口报错时自动跳转到该自定义页面）支持自定义文案、状态码等功能
前言在开发 Nuxt.js 时,当页面出错或接口后台数据返回异常时,页面就会 "直接呈现" 报错的信息. 正常情况下,当页面 404.500 或页面报错时, 前端应该自动跳转到 ...
Vue 如何实现登录后，跳转到登录之前要访问的页面
Vue 如何实现登录后,跳转到登录之前要访问的页面一.需求有些时候,需要实现这样的功能: 项目中的有些页面是可以直接访问的,不需要登录. 但这个页面中的一些链接一些路径则需要登录后才能查看,也就是 ...
页面监听，一段时间内不操作网页，就自动跳转到登录页
需求:用户在 5 分钟内没有操作网页,就自动跳转到登录页. 环境:jquery 项目,有公共的 js 文件 . 在所有页面都引用的 js 文件中添加下面代码: //判断用户是否在5分钟内未操作页面,如 ...
vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
登录时“自动填充”和“验证码”的实现
自动填充和验证码的实现需求 1. 基础登录功能 1.1 持久层 pojo实体类: 代理接口: 1.2 业务层 1.3 表现层 login.jsp(登陆界面): LoginServlet: selec ...
利用Referer+URL参数实现登录后自动跳回登录前页面
登录后自动跳回登录前页面原理: 利用Referer+URL参数实现 1:用户未登录,试图点击下载(下载前需要登录),点击Download时,发出的请求会带上Referer头 2: 重定向到登录页面时 ...
基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
html表单注册跳转页面,出现一个问题，点击“注册”按钮页面进入注册表单后自动跳转回登录页面...
源自:4-5 单页面应用Demo2(2) 出现一个问题,点击"注册"按钮页面进入注册表单后自动跳转回登录页面用户名: 密码: 登录注册用户名: 密码: 再次输入密码: 确定 ...
自动判断浏览器的中英文版本自动跳转网站中英文页面代码
许多网站现在都是依靠自动判断浏览器的中英文版本来判断给你打开网站的中文还是英文版,也许好多朋友还不知道这个代码,今天正好给公司改版企业网站用到了,在此公布出来,供大家一起学习. HTML网页根据来访者 ...

vue-router判断页面未登录时，自动跳转到登录页

vue-router判断页面未登录时，自动跳转到登录页相关推荐

最新文章

热门文章