当前位置:首页 > vue.js技术文章 > vue实现登录后页面跳转到之前页面

vue实现登录后页面跳转到之前页面的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:216

这篇文章主要知识点是关于vue、登录后跳转、vue实现未登录跳转到登录页面的方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js快速入门

目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

查看详情

vue实现登录后页面跳转到之前页面

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢?

先说一下我们需要用到的几个API:

1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.name获得当前路由的名称。

2.router.replace:作用和router.push相同,不过它不会向history添加新纪录,而是替换当前的history记录。

 

由于大家的代码写的都不一样,我就不放我具体的实现代码,简单介绍一下思路:

1.用户点开链接后,跳转到的目标的路由页面,然后触发401拦截器,返回登录页面:

//401拦截
if(status == "401"){
  router.push("/login")   
}

2.我们可以在401拦截的时候将目标链接保存在url中:

if (status == 401) {
   //判断当前的路由是否是目标路由
   if(router.currentRoute.name == "target"){
    //跳转回login路由,并把目标路由的url路径保存在login的query中
    router.replace({
     name:"login",
     query: {redirect: router.currentRoute.fullPath}
    })
   }else{
    /* 普通401拦截直接返回到登录页面 */
    router.push('/login');
   }
  }

3.点击登录后使用url上保存的query直接跳转回目标页面

router.push({path:decodeURIComponent(url)});

以上就是我们分享的功能实现代码,感谢你对码农之家的支持。

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

环境:vue 2.9.3; webpack;vue-router

目的:实现未登录跳转

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

图示:

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

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

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

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

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

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

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

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

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

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

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

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

总结

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

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vuex的实例用法教程、 Vue2实现组件props双向绑定、 vue中的watch监听数据变化及、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:实例详解vue拦截器Vue.http.interceptors.push

下一篇:vue-cli开发时ajax跨域的方法

展开 +

收起 -

学习笔记
网友NO.204186

mpvue跳转页面及注意事项

下面先给大家介绍下mpvue跳转页面,具体内容如下所示: 正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路。 第一步就是配置环境之类的。。。附上官网的quickstart http://mpvue.com/mpvue/quickstart/ 相信看完官网的教程之后, 你的项目应该已经搭好了。下面说2个小问题的解决办法吧 1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧) build文件夹---webpack.base.conf.js----module-rules {...loader:'eslint-loader'...} 这里面的都删掉吧 2.写好一个页面,该跳转页面了,一脸懵逼。 就这样,重点是main.js不能少,不然dist里面不会生成对应的文件,npm run dev 重启就可以啦 写完一个小程序,但是还没有做数据交互,除了跳转页面这块,其他的就是vue的问题了,我在做的时候百度了好久跳转页面的问题……

网友NO.650355

Vue.js中该如何自己维护路由跳转记录

前言 在Vue的项目中,如果我们想要做返回、回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你当前应用的访问记录,这是非常可怕的事情。 解决方案就是,我们自己来维护一份history跳转记录。 案例与使用场景 代码地址:https://github.com/dora-zc/mini-vue-mall(本地下载) 这是一个基于Vue.js的小型商城案例,应用场景: 自己实现一个Vue插件src/utils/history.js,通过堆栈的方式维护页面跳转的历史记录,控制返回跳转 点击返回按钮是出栈操作 在全局路由router.js 中,实例化路由前,通过原型扩展router的back()方法 在全局afterEach中存放历史记录 代码实现 实现history插件,维护历史记录 // src/utils/history.jsconst History = { _history: [], // 历史记录堆栈 install(Vue) { // 提供……

网友NO.747659

基于vue开发微信小程序mpvue-docs跳转页面功能

打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点。。。 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢! ……

网友NO.802414

Vue+Flask实现简单的登录验证跳转的示例代码

本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下: 文件位置: login.html !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleLogin/title script type="text/javascript" src="../static/vue.js"/script script type="text/javascript" src="../static/axios.js"/script/headbodydiv id="login" form action="#" novalidate label for="username"Username/label input type="text" name="username" id="username" placeholder="Enter your Name" v-model="username"br label for="password"Password/label input type="text" name="password" id="password" placeholder="Enter your Password" v-model="password"br br button type="button" v-on:click="login"Apply/button /form/divscript type="text/javascript" var login = new Vue({ el: '#login', data:{ username: '', password: '' }, methods: { login: function () { axios.post('http://127.0.0.1:5000/login',{ username: this.username, password: this.password }).then(function (response) { console.log(response.status) // 其实是应该走……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757