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

2024-02-09 07:15:23

环境：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实现未登录跳转到登录页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

前端Vue项目详解--初始化及导航栏

一.项目初始化创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod
vue-router判断页面未登录自动跳转到登录页的方法示例

1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ { path: '/', component: App, children: [ { path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页', re
Vue登录注册并保持登录状态的方法

关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等那如何判断路由是否需要登录呢?就要在路由JS里面做文章在router.js中添加meta区分比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置
Vue中的验证登录状态的实现方法

Vue项目中实现用户登录及token验证先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据使用axios请求登录接口,匹配账号和密码账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息
vue项目初始化到登录login页面的示例

如下所示: export default new Router({ routes: [ { path: '/', redirect:'/login', }, { path: '/login', alias:'/accounts/login', name: '登录', component: () => import('@/views/accounts/login') } ] `` 嗯就这样写就可以啦我向来都是简单粗暴~~ 以上这篇vue项目初始化到登录login页面的示例就是小编分享给大家的全
vue实现登录后页面跳转到之前页面

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.
vue实现未登录跳转到登录页面的方法

环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分
Vue实现未登录跳转到登录页的示例代码

1.登录页登录成功时将服务端返回的标识存放起来 2.在router中给不需要登录的页面设置 meta : { auth : false },如首页 3.使用路由前置守卫beforEach,由于给路由设置了meta : { auth : false },如果是符合该属性时则不需要跳转登录页 4.接下来根据token是否存入到localstorage来进行判断或者cookie是否存入客户端做判断,这里在vuex中做处理如果token和cookie不存在时则需要跳转到登录页 5.在axios中响应拦
Vue-router路由判断页面未登录跳转到登录页面的实例

如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该
react-navigation 如何判断用户是否登录跳转到登录页的方法

本文介绍了react-navigation 如何判断用户是否登录跳转到登录页的方法,分享给大家,也给自己留个笔记,具体如下: 新建一个index.js import React, {Component} from 'react'; import {AppRegistry, Text, View, Button,Image,StyleSheet,BackHandler,ToastAndroid} from 'react-native'; import { StackNavigator,TabNav
解决vue做详情页跳转的时候使用created方法数据不会更新问题

大家在做项目的时候肯定会遇到携带某个参数跳转到详情页然后取这个参数,下面是重点刚开始我用cookie把这个参数存起来在详情页面取这个参数发现只有第一次取到的是正确的你在回到父页面在点击进详情页发现取到的数据跟原来的一模一样根本没有发生改变(因为router跳转时是不会刷新页面的所以导致我取得值永远不能更新),我以为是cookie有问题了后来又用了query携带参数跳转,sessionStorage方法存取发现都不行, 看下图解决办法我也不知道其中是什么原理没搞明白但是解决了问题了,看
ios App加载本地HTML网页,点击网页链接跳转到app页面的方法

一.如何在APP里加载本地html文件内容: 首先准备一个html文件,比如内容如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <tit
Django之编辑时根据条件跳转回原页面的方法

在要跳转的编辑页面: #首先获取当期的url: curr_url = self.request.GET.urlencode() #创建一个QueryDict对象: params = QueryDict(mutable=True) #将当前的url赋值给一个新的参数: params['_list_filter'] = curr_url #处理url: return mark_safe('<a href=%s?%s>编辑</a>' % (self.get_change_url(obj.
vue异步axios获取的数据渲染到页面的方法

我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined. 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式... created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001
vue 刷新之后嵌套路由不变重新渲染页面的方法

解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面
Android 接收推送消息跳转到指定页面的方法

问题的提出本次接入的是个推,其他家的推送没有研究过,思路应该是类似的 App在前台,这个时候需要弹出一个对话框,提醒用户有新的消息,是否要查看,查看的话跳转到指定页面 App在后台,或是App进程已经被系统回收,收到推送后App进程会被个推拉起.这时候要展示通知,点击通知栏打开App并跳转到目标页面,关闭目标页面后需要返回到应用首页,而不是直接推出App 实现思路 App在前台时,弹出Dialog提醒用户有新消息,但是最新版的个推文档接收推送消息是继承IntentService,无法获取弹出D

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

相关推荐

随机推荐