Vue项目中常见问题(59)未登录的导航路由守卫判断

最新推荐文章于 2023-01-30 16:08:41 发布
最新推荐文章于 2023-01-30 16:08:41 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： vue前台管理项目 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124987202
版权
在Vue.js项目中，为确保未登录用户无法访问特定页面（如交易、支付、用户中心），使用全局路由守卫进行判断和处理。在Header组件中修改导航链接，并在router/index.js中编写判断逻辑。当用户登录后，通过保存和检查query参数，确保返回到原来的页面，例如从登录页返回到之前尝试访问的订单页。
摘要由CSDN通过智能技术生成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

业务需求1:

1.把Header中该实现的跳转都实现

2.处理跳转业务

问题出现:

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求1:

我们知道未登录的状态,是不能进入交易相关(trade)、支付相关(pay、paysuccess)、用户中心(center)页面的,如果用户点击进入这些页面就会跳转到登录页面

这里我们利用全局守卫来做

1.把Header中该实现的跳转都实现

在components/Header/index.vue中:

 找到对应的结构

最低0.47元/天 解锁文章
学无止境QAQ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue电商平台未登录的导航路由守卫
weixin_68006893的博客
07-19 350
Vue未登录的导航路由守卫
vue 未登录导航守卫判断
weixinmingwo的博客
03-07 411
如果没有登录 //如果没有登陆 跳到login页面 let path = to.path if(path.indexOf('shopcart') != -1 || path.indexOf('trade') != -1 || path.indexOf('addcartsuccess') != -1 || path.indexOf('center') != -1){ next('/login?redirect='+path)//带参数 这样登录后去想去的地址 }else{ next
vue 导航守卫 判断用户是否登录
ltf-spaceweixin_46032911的博客
03-25 424
如果用户访问登录页面，则直接放行 如果用户访问具有权限的页面时，首先检测有没有token值。有，则表示用户已登录，直接放行，如果没有token值，则强制跳转到登录页 // to代表将要访问的路径 // from代表从哪个路径跳转过来 // next是函数，表示放行 router.beforeEach((to,from,next) => { if(to.path === '/login') return next(); const tokenStr = window.sessionStorag
vue element jwt后端返回未登录或者无权限问题
weixin_42975494的博客
11-19 889
vue element 在upload 使用submit 提交的时候，如果后端采用jwt模式会导致没有权限的错误提示
vue 路由守卫 -- 全局前置守卫
web00_11的博客
03-24 1059
beforeEach 在这个守卫里面可以做一些防止用户非法进入页面的操作，在进入页面的时候可以做一些用户信息验证，判断是否具有 token ，不具有的话禁止用户进入页面，可以提高安全性 router.beforeEach((to, from, next) => { const token = localStorage.token; if(token) { next(); } else { if(to.path === '/index') { next() } else {
vue 利用路由守卫判断是否登录的方法
10-17
在这个例子中，我们将详细解释如何利用Vue Router的路由守卫来判断用户是否已登录，并据此决定是否允许访问特定的页面。 首先，我们需要在项目中的`router/index.js`文件中导入必要的组件。在这里，我们导入Vue、...
vue2.0 实现导航守卫的具体用法（路由守卫）
08-27
在Vue2.0中，导航守卫（Navigation Guards）是一种强大的功能，用于在路由切换时执行特定的操作，如权限验证、数据预加载等。这些操作可以在路由改变的多个阶段进行，确保应用程序的安全性和性能。Vue-Router提供了...
vue2.0 实现导航守卫（路由守卫）
08-27
在Vue 2.0中，路由守卫（Navigation Guards）是一种强大的机制，它允许你在路由切换过程中执行异步操作，如验证用户权限、加载数据等。`vue-router`提供了多种类型的导航守卫，包括全局守卫、组件内守卫以及路由独享...
vue 路由守卫(导航守卫)及其具体使用
10-15
Vue.js的路由守卫，也称为导航守卫，是Vue Router框架中的一种功能，用于在路由切换时执行特定逻辑，如验证用户权限、处理页面状态等。这些守卫分为全局守卫、组件内守卫和路由独享守卫，它们在路由导航过程中扮演着...
vue3 导航守卫（在没有登录时只能一直在登录和注册页面）
july_29的博客
08-16 1137
记录在学习vue中的一些问题 导航守卫，官方文档给出的定义： 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ … }) router.beforeEach((to, from, next) => { // … }) 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。 每个守卫方法接收三个参数： to: Route: 即将要进入的目标 路由对
Vue--》vue-router的导航守卫以及路由器的三种工作模式的使用讲解
ztK63LrD的博客
12-15 1038
在浏览器中点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击链接、vue项目中点击都属于声明式导航。在浏览器中调用API方法实现的导航方式，叫做编程式导航。例如：普通网页中调用跳转到新页面的方式，属于编程式导航。
vue本地服务,代理其他登陆服务,遭遇sessionID不一致,而登陆失败解决办法；
qq_42264793的博客
12-13 931
vue本地服务,代理其他登陆服务,遭遇sessionID不一致,而登陆失败解决办法; //url 是你代理的地址 //源请求有一个sessionID //代理请求又一个sessionID //例如使用的是redis-sercer //查看日志会发现sessionID的不一样,导致代理登陆失败 //如下解决方法 '/login': { target: url + "/login", ws: true, changeOrigin: true, p
vue的axios拦截器实现未登录页面跳转
ywb201314的专栏
09-21 3928
1.拦截器分为request请求拦截器和response响应拦截器 PS：request请求拦截器：发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等。 response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。 2.main.js文件中（先安装axios） import axios from 'axios' // 给Vue函数添加一个原型属性$axios指向axios.
vue登录系统时保存用户名，在其他页面中调用
nyf_unknow的博客
04-06 3258
项目场景： 知识产权模块 问题描述 需要获取登录时的用户名，在其他组件中使用。 解决方案： 1.绑定事件 <a-button size="default" type="primary" class="login-button" @click.stop.prevent="handleSubmit" :disabled="loginBtn" >登录
学习vue-vben-admin遇到的问题（一）
f897907070的博客
01-30 3479
文件 会被视为一个路由模块，相应也得也会在左侧生成一个菜单 有很多注意的地方，要不然很容易出现404 或者加载错误的问题。一个文件夹呢，不能有其他vue视图文件 否则报错，找不到问题，例如菜单2是test2文件，菜单是1test1文件夹需要分开放。这几天在公司接触了一个后台框架 vue-vben-admin 打开得时候，感觉页面和效果的做的不错。折腾了两天才渐渐有点感觉，开始第一次接触还是点蒙，怎么做的 官网地址是。title: t('测试'), ///子菜单名称 不可重复。//父级菜单的子菜单。
Vue工程路由守卫之未登录跳转到登陆页面
weixin_44000275的博客
06-03 898
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){ //判断登陆状态 ...
Vue实现未登录跳转到登录页
Mjxiaomihu的博客
08-16 9273
Vue实现未登录跳转到登录页
vue未登录跳转至登录页面
小白菜的博客
05-28 2031
导航守卫：router.beforeEach 配置路由 const routes = [ { path: "/userCenter", //个人中心 name: 'userCenter', component: r => require.ensure([], () => r(require('@/views/userCenter/index')), 'userCenter'), meta: { requiresAuth: t
如何利用vue路由拦截实现用户登录控制
Shids_的博客
01-13 5814
如何利用vue路由拦截实现用户登录控制
vue路由守卫判断登录
最新发布
07-28
综上所述，以上代码实现了Vue路由守卫判断登录的功能。 #### 引用[.reference_title] - *1* *2* [vue 利用路由守卫判断是否登录](https://blog.csdn.net/sugang666/article/details/85014604)[target="_blank" data-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值