Vue工程路由守卫之未登录跳转到登陆页面

最新推荐文章于 2024-05-17 11:07:21 发布
最新推荐文章于 2024-05-17 11:07:21 发布
阅读量895 收藏
点赞数
分类专栏： 个人学习 vue 文章标签： 路由守卫
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44000275/article/details/90759785
版权

1.准备工作

vuex,router

2.关键内容：

一.vuex中state中status:false,判定是否登陆

3.开始写

main.js中：

router.beforeEach((to,from,next)=>{
  if(to.name=='user')  //即将进入用户
  {

    if(store.state.status==false){   //判断登陆状态
        next('/login')   //跳转到登陆页面
    }else{next()}

  }else{next()}

})
氪精大佬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-router路由判断页面未登录跳转到登录页面的实例
11-27
如下所示： 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作为参数，登录成功后跳转到该路由 }) } } else { next(); } });
vue路由守卫未登录跳转到登陆页面
唯一轩
08-02 5918
在路由里添加守卫 可以在登陆页面添加 created(){ if(sessionStorage.username){ //登陆了自动跳到首页，来阻止重复登陆 this.$router.push("/") } }, const router= new Router({ mode:"history...
路由守卫、跳转
最新发布
macanhappy的博客
05-17 1020
router.replace('/')A页面切换到B页面 再从B页面跳到C页面， B页面被替换返回到A页面。1.声明式导航 router-link(用to属性跳转)2.编程式导航 router.push('/')1.声明式导航 a(用来跳转下载) href()路由跳转的方式可以有多种，具体取决于所使用的技术和框架。beforeResolve 解析守卫。：全局守卫作用于整个应用，包括全局前置守卫和全局后置守卫。beforeEach 前置守卫。：独享守卫作用于单个路由，也称为路由独享守卫。
vue路由守卫判断用户是否登录，如果没登陆就跳转到登录
weixin_44302838的博客
08-19 1521
router.beforeEach((to, from, next) => {//路由跳转中 const nextRoute = ['About'];//将所有需要登陆才显示的页面的路由都放进一个数组，我这里是about页面 // 开启进度条 NProgress.start() if(nextRoute.indexOf(to.name) >= 0) { //判断要进入的页面路由是否需要登录才能进入,如果是就判断登录状态 if (getToken()) {//如果登录
Vue路由守卫实现无登录只跳转到登录页面
qq_39636932的博客
08-30 1626
路由守卫实现跳转
【应用】使用 vue-router 之导航守卫 + meta + localStorage 实现在未登录状态下跳转到登录页面的功能
Dora_5537的博客
03-08 1444
vue-router 之导航守卫的官网地址 具体实现： 1.router.js文件 在定义路由的时候，加上 meta: {requireAuth: true}，定义一个完整路由的代码如下所示 ： { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld, me...
vue实现未登录跳转到登录页面的方法
10-18
主要介绍了vue实现未登录跳转到登录页面的方法，主要目的是实现未登录跳转，需要的朋友参考下吧
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
10-15
4. 如果所有路由都不需要登录，或者用户未登录，那么保存当前试图访问的页面路径到 `sessionStorage`，并重定向至登录页 `login`。 在路由配置中，我们需要在每个需要登录的路由的 `meta` 字段中设置 `requiresAuth...
vue 利用路由守卫判断是否登录的方法
10-17
在Vue.js应用中，路由守卫是一个强大的特性，它允许我们在路由进行切换时执行特定的逻辑，例如检查用户是否已登录。在这个例子中，我们将详细解释如何利用Vue Router的路由守卫来判断用户是否已登录，并据此决定是否...
Vue利用路由钩子token过期后跳转到登录页的实例
11-26
在Vue2.0中的路由钩子主要是用来拦截导航，让它完成跳转或前取消，可以理解为路由守卫。 分为全局导航钩子，单个路由独享的钩子，组件内钩子。 三种 类型的钩子只是用的地方不一样，都接受一个函数作为参数，函数...
Vue路由守卫，未登录时跳转到登录界面，已登录跳转到主页
qq_40292164的博客
10-11 9487
实现的功能： 1.未登录时跳转到登录界面，已登录跳转到主页 2.限制手动进入主页 使用方法 ： 1.将const nextRoute数组中的路由替换成需要登录权限的路由 2.isLogin是你获取到的登录状态，更改即可 // 全局路由守卫 router.beforeEach((to, from, next) => { // to: Route: 即将要进入的目标 ...
vue用路由守卫进行登录后的路由跳转
Dax1_的博客
01-18 4118
昨天已经成功地获取到登录的token，并将token存储在session storage中，今天完成了获取到token之前与之后内容页与登录页之间的路由跳转，主要用路由守卫来实现 在 router/index.js中，将要进行拦截的页面meta中加入 loginRequest: 'true'，冒号前面的变量可以自己定义，这步是为后面判断是否拦截提供依据 { path: '/', redirect: '/index', component: Layout, meta:
Vue配置路由导航守卫实现用户登录和退出(Vue2.x)
世纪末的架构师的博客
08-21 8080
文章目录前言一、配置路由导航守卫1. 全局导航守卫2. 局部导航守卫二、用户登录1. axios配置2. 用户登录代码三、用户退出1. 实现代码总结 前言 做任何一件事，都要有始有终，坚持把它做完。不要轻易放弃，如果放弃了，就永远没有成功的可能。在遇到挫折时，要反复告诉自己：把这件事坚持做下去。 之前在Vue的学习中通过路由导航守卫控制实现了用户登录模块的功能，现在再次做项目时又要通过Vue配置路由导航守卫来实现相同的功能，在此将实现过程进行记录与总结（本文基于Vue2.x进行实现） 提示：以下是
实现未登录跳转回login页
jokren的博客
04-13 2002
问题：未登陆直接输入url：地址进入网站 vue项目实例： 一，设置router 1.首先配置路由 /src/router/index.js文件 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/',/...
未登录拦截和登陆后直接跳转到当时想要跳的页面去
liuhongboke的博客
08-01 909
例如我这里想要跳转到center页面去，但是这个页面需要登录授权才可以跳转过去，没有登录的话就会直接返回登录页面，query字段的话就可以记录到我是从center页面跳转过来的）应用获取到的query字段，我可以在登录成功后直接跳转到我想去的center页面。//next是必须要执行的，加上next路由才会跳转（next()允许跳转）我这里路由配置是单独放在一个文件下面。//from是跳转前的路由(从哪儿来)//to是跳转后的页面路由（到哪儿去。query字段记录从哪儿跳转来的。//路由拦截（守卫）...
vite-vue3_pinia 课程页面
qq_38210427的博客
04-20 94
准备接口：返回的是二进制流。
vue路由守卫、token过期处理、登陆后跳转到原页面
浮游的博客
04-01 3753
路由配置 想要实现只有在登录或者注册成功的状态下，才能进入系统，这时候就可以使用路由守卫，最简单的说，路由守卫可以用来判断用户是否登录，该页面用户是否有权限浏览，一般利用token来实现。 配置路由守卫 在route.js中进行配置 import Vue from 'vue' import Router from 'vue-router' import system from './router/system' import doc from './router/doc' import pages fro
vue项目用户免登录逻辑（一个项目跳转另一个项目指定页面，无需输入账号密码登陆）
热门推荐
qq_51196135的博客
04-25 1万+
背景：在一些项目中，可能会需要打通两个平台之间的权限，即为用户在当前项目，想要通过某个button或者链接跳转到另一个项目（简称从A跳到B）的制定路由页面，那么根据一般情况，用户会被另一个项目阻拦在登陆页面，进行登陆，所以我们需要改一下B项目的登陆逻辑------通常来说：我们在登陆页面会通过点击button并携带账号密码给后端发请求，后端验证账号密码正确返回一个token，此时浏览器存入token就可以进入项目，由于此项目需要打通两个平台，所以我们可以将B项目的登陆逻辑这样处理：用户在从A项目的某个but
vue3用路由实现未登录跳转到登录页面
05-30
要实现未登录跳转到登录页面的功能，可以在 Vue3 中使用 Vue Router。具体实现步骤如下： 1. 安装 Vue Router： ``` npm install vue-router ``` 2. 在项目中创建一个路由实例： ``` import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ // 定义路由 { path: '/login', component: Login }, { path: '/home', component: Home, meta: { requireAuth: true // 添加该字段，表示进入这个路由是需要登录的 } } ] }) export default router ``` 这里定义了两个路由，一个是登录页面 `/login`，另一个是需要登录才能访问的页面 `/home`。注意，`/home` 路由添加了一个 `meta` 字段，用来表示该路由需要登录才能访问。 3. 在路由实例中添加一个全局前置守卫： ``` router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (localStorage.getItem('token')) { // 通过 token 判断是否已经登录 next() } else { next({ path: '/login', query: { redirect: to.fullPath } // 将跳转的路由 path 作为参数，登录成功后跳转到该路由 }) } } else { next() } }) ``` 该守卫会在每个路由跳转之前执行，用来判断用户是否已经登录。如果用户已经登录，则直接跳转到目标路由；如果用户未登录，则跳转到登录页面，并将目标路由的 path 作为参数传递过去。 4. 在组件中使用路由跳转： ``` <template> <div> <button @click="gotoHome">进入首页</button> </div> </template> <script> export default { methods: { gotoHome() { this.$router.push('/home') } } } </script> ``` 通过 `this.$router.push('/home')` 可以实现路由跳转。 这样，当用户未登录时，访问需要登录才能访问的页面时，就会被自动跳转到登录页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值