php未登录跳到登陆页面,vue实现未登录跳转到登录页面的方法

环境：vue 2.9.3; webpack;vue-router

目的：实现未登录跳转

例子：直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断，如果没有就跳转到登录页面，有的话就打开。

图示：

1、直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页，而且会带上参数。

--------------------------------------------分割线----------------------------------------------

vue-router需要安装

首先配置路由

/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',// 登录

name: 'Login',

component: resolve => require(['@/PACS/pages/Login'],resolve)

},{

path: '/home',

name: 'Home',

meta: {

requireAuth: true, // 判断是否需要登录

component: resolve => require(['@/PACS/pages/Home'],resolve)

}

]

})

## 增加了字段 requireAuth 用来判断该路由是否需要登录。

然后配置main.js

// 路由判断登录根据路由配置文件的参数

router.beforeEach((to, from, next) => {

if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限

console.log('需要登录');

if (localStorage.token) { // 判断当前的token是否存在；登录存入的token

next();

}

else {

next({

path: '/',

query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由

})

}

else {

next();

}

});

这里是登录时存入的token

##这样的话登录时就会直接跳转到登录页面。

实现登录成功后再跳回开始输入的页面，就要用到后面传递的值了。

如果包含redirect就跳转到刚刚输入的页面。

注意：如果将用户数据保存到localstorage是不合理的，这里只是给出一种思路，如果登陆之后不清空浏览器数据，token一直存在的，判断就会失效。

总结

以上所述是小编给大家介绍的vue实现未登录跳转到登录页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

php未登录跳到登陆页面,vue实现未登录跳转到登录页面的方法相关推荐

gta5服务器错误无法在线登录,GTA5在线登陆失败您从未在此机器上成功登录过怎么办在线登陆失败解决方法介绍...
GTA5在线登陆失败您从未在此机器上成功登录过怎么办?玩家们可以在EPIC平台上面免费购买游戏,但是有玩家发现自己在登录的时候显示""在线登陆失败.您从未在此机器上成功登陆过,因此 ...
VUE项目中的微信扫码登录
微信扫码登录功能首先了解微信扫码登录的流程和详解,详见微信扫码登录,这边仅是vue前端相关流程一.创建微信登录按钮及方法,配置相关参数 1.创建微信登录按钮 <!--微信授权登录按钮--&g ...
163邮箱登陆忘记密码怎么办？163手机邮箱怎么登录？
163邮箱登陆忘记密码怎么办?163手机邮箱怎么登录?邮箱作为一款现代主要通讯工具,为工作.生活带来了很多便利,深受广大用户喜爱.近期,有朋友提问道,邮箱里有很多重要资料,长期未登录,不小心忘记密码了 ...
Spring mvc 未登录拦截跳转登陆页面
在拦截的时候会遇到未登录直接跳转到 login.jsp 之前做项目,用到了两种方法 (1) ajax 异步登录如果未登录返回一个 restfulMessage (自定义的返回类)里面定义一 ...
vue跳转下个页面关闭当前页面_如何机智判断页面是刷新还是关闭，背景：vue项目，需求：关闭页面，下次直接跳到登陆页...
最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了 ...
vue实现未登录无法访问某页面
vue实现未登录无法访问某页面 //路由 {path: "index",name: "Index",component: () => import(&qu ...
提示未登录，点确认，跳到登陆页
提示未登录,点确认,跳到登陆页 ClientScript.RegisterClientScriptBlock(GetType(), "", "<script> ...
Vue实现未登录跳转到登录页
1.登录页登录成功时将服务端返回的标识存放起来 2.在router中给不需要登录的页面设置 meta : { auth : false },如首页 3.使用路由前置守卫beforEach,由于给路由设 ...
vue项目实践教程2：使用vux设计登录注册，并讲解vue路由，切换页面标题等内容
上一章笔者介绍vux项目的搭建和简介,这里笔者设计几个登录注册页面,来讲解vux中的相关组件的使用,和vue的相关基础知识. 1.我们在与components文件夹同级的目录下创建一个views文件夹 ...

php未登录跳到登陆页面,vue实现未登录跳转到登录页面的方法

php未登录跳到登陆页面,vue实现未登录跳转到登录页面的方法相关推荐

最新文章

热门文章