vue router+vuex实现首页登录验证判断逻辑

2025-05-31 05:14:52

首页登录逻辑要求在页面上判断是否获取到登录token ，没有获取到则跳转到登录页。登录成功后，跳转到前一个页面。

1.vue router

路由判断首先我们想到的是router.beforeEach 前置导航守卫，这个方法接受三个参数 to from next 。

to参数为即将跳转的路由路径，from为当前导航正要离开的路由，next方法用来resolve这个钩子。

下面以工作中写的一个判断为为例子：

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子，如果不是，进行到下一个判断
  return next();
 }
 const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息
 if (needLogin) {
  return next({  // 如果没有则跳转到登录页，将当前路由路径放到参数中
   name: 'login',
   params: { back: to },
  });
 }
 return next();
});

2. this.$router 与 this.$route this.$router.push 与 this.$router.replace

在登录页完成登录请求后进行下面的操作

获取路径中存放前一个路径的参数 ,然后跳转到该页面

 loginSuccess() {
   const { params: { back } } = this.$route;
   const route = back || { name: 'home' };
   const { name, params, query } = route;
   this.$router.replace({ name, params, query });
  },

在上面这段代码中出现了两个我们经常混淆的概念:

我们知道this.$router是router实例，可以用来直接访问路由。我们称router配置中每一个对象为一个路由记录，this.$route是暴露出来用来访问每个路由记录的。因此我们获取参数时使用的是this.$route 跳转路由时使用的是道this.$router。

上端代码中我们使用了replace而不是push来跳转路由，这两者的区别是会不会在history中产生记录。replace不会新增记录，而是直接替换掉了这条路由记录。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vuex与组件联合使用的方法

官方定义: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.我的理解就是,vuex就是前端的数据库. 1.首先核心是store,是个仓库,包含着state,因此第一步需要新建一个store. 显示界面: 其中state就是仓库store,东西都存在这里. 2.从state中取数据,使用Lodash比较方便,语法如下: 也可以使用vuex的getters,语法; 官方文档还结束通过属性访问,通过方法访问等.https://vuex.vuejs.org/zh-cn/getters.h
详解vuex结合localstorage动态监听storage的变化

需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化. 分析:vue无法监听localstorage的变化.localstorage主要用于不同页面间传值,vue适合组件间传值.对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,localstorage存储在本地浏览器中),可以采用vuex+localstorage的方式. 关于vuex和storage的区别 1.最重要的区别:vuex存储在内存,locals
vuex进阶知识点巩固

一. Getter 我们先回忆一下上一篇的代码 computed:{ getName(){ return this.$store.state.name } } 这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.name 上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份. vuex 给我们提供了 getter,请看代码 (文件位置 /src/store/index.js) import Vue from
基于vue,vue-router, vuex及addRoutes进行权限控制问题

基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程. 首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么. 首先是token. 没有登陆的用户是获取不到token的,而登陆后的角色我们会将token存到local或者seesionStor
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到更新之后的related值,即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容. 我的解决办法: 父组件像子组件传值,当父组件执行了获取页面详情的方法之后,state值related更新,然后传给子组件,子组件再进行渲染,可以正常获取到.
简单的三步vuex入门

前言之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因, event bus 的成本反而比vuex还高, 所以技术选型上选用了 vuex, 但是不知道为什么, 团队里的一些新人一听到vuex,就开始退缩了, 因为vuex 很难? 真的很难吗? 今天我们用简单的3步来证明一下,vuex有多简单. 纯属个人经验,难免有不正确的地方,如有发现,欢迎指正! 这是一个针对新手的入门级教程.入门级教程.入门级教程第零步新建一个vue项目,安装vuex,这里不做过多介绍,能点进来的
vuex操作state对象的实例代码

Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vue有五个核心概念,state, getters, mutations, actions, modules. 总结 state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法,同步! actions => 像一个装饰器,包裹mutations,使之可以
vue router+vuex实现首页登录验证判断逻辑

首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页.登录成功后,跳转到前一个页面. 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next . to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子. 下面以工作中写的一个判断为为例子: router.beforeEach(async (to, from, next) => {
vuex + axios 做登录验证并且保存登录状态的实例

还是那句话,网上找个完整的博客真的难,实现效果全靠摸索啊第一步:安装axios .vuex npm i -s axios npm i -s vuex 执行这两句 ,vue等环境搭建就不废话了第二步:配置main.js文件上图不上码,菊花万人捅,附上代码 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.
非Vuex实现的登录状态判断封装实例代码

目录前言登录状态封装 getToken isLogin 使用方法 setToken 最后前言在项目中肯定会有用户登录状态的判断,所以我们需要封装判断登录状态,用来满足整个项目的应用,当然刚不使用封装的话,会造成耦合度高,代码冗余等结果,在项目中可能常常用到vuex状态管理来进行登录状态的存,那如果项目用不到状态管理,那就可以使用简单的封装来进行登录状态判断. 登录状态封装我们如果想要普通封装登录状态的话需要两个函数即获取存储的token的getToken和使用token判断是否登录的i
Vue+Flask实现简单的登录验证跳转的示例代码

本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下: 文件位置: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <script type="text/javascript" src="../sta
vue使用vuex实现首页导航切换不同路由的方法

vue实现首页导航切换不同路由的方式(二)[使用vuex实现的],具体代码如下所示: <nav>  <div class="indexNavOut"> <div class="indexNav"> <ul class="navLi"> <li @click="checkNav()" style="width: 130px;&qu
Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

目录前言一.实现效果二.实现步骤及涉及要点三.涉及代码总结前言在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态. 这里小马演示使用的是 localStorage + vuex 方法(其他诸如 sessionStorage.cookie 等用法相同,只是功能有所区别). 一.实现效果实现功能:用户登录成功后,刷新浏览器页面或者关闭浏览器再次打开网页后,登录状态依然保持,直到用户点击登
vue router自动判断左右翻页转场动画效果

前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得, 一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如: 1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时, 二级页面从屏幕的右边向左边移动出现.(类似翻书翻到
Vue中登录验证成功后保存token,并每次请求携带并验证token操作

在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回一个token值,用loaclStorage保存 localStorage.setItem('token',res.data.token) 在main.js中设置全局请求头和响应回来的判断 //设置axios请求头加入toke
VUE实现token登录验证

本文实例为大家分享了VUE实现token登录验证的具体代码,供大家参考,具体内容如下实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个头两个大,感觉自己的毅力和耐心又提升了一个层次ORZ 好在最终在同学的帮助下解决了bug,不过我又再次感受到了作为一个菜鸟的浅薄,大佬的问题屡次触及到我的知识盲区......现在详细地记录一下实现token登录验证的步骤,以防以后再犯错 1.封装store对token的操作方法首先在src目录下创建一个store文
Vue中设置登录验证拦截功能的思路详解

目录一.解决思路二.让浏览器存储服务器返回的token 三.在请求中设置访问权限四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

vue router+vuex实现首页登录验证判断逻辑

相关推荐

随机推荐