vue-router项目中的登录验证问题

最新推荐文章于 2024-05-09 10:11:00 发布
最新推荐文章于 2024-05-09 10:11:00 发布
阅读量1.7k 收藏 4
点赞数 1
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinchaidaren/article/details/80810672
版权
该博客讲述了在Vue-Router项目中如何进行登录验证。通过在用户登录时存储token到sessionStorage，然后在全局导航守卫中检查token是否存在，来决定是否允许访问其他页面。当退出登录时，会清除sessionStorage中的token信息。
摘要由CSDN通过智能技术生成

思路：登录的时候，将从后台拿到的token信息，使用sessionStorage进行存储，然后在全局的导航守卫中

；判断本地存储sessionStorage是否是存在token的信息，如果是存在就可以进行其他导航页面访问，不存在的情况下就停留在登录页面；退出登录的以后，将sessionStorage存储的信息进行清空。

步骤一：用户登录

 this.$axios.post(url,data).then((
最低0.47元/天 解锁文章
Lofty_ambition
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue router路由导航守卫设置指定页面验证登录
qq_40410916的博客
07-31 939
vue router路由导航守卫可以做很多功能，下面介绍设置指定页面验证登录 router的前置守卫 router.beforeEach((to, from, next) => { //判断目标路由的meta元字符中是否匹配限制 if (to.matched.some(record => record.meta.requiresAuth)) { //判断是否已登录 if (sessionStorage.getItem("tokenname") == null) { //跳
vue-router token 验证权限，是否跳转到登录页面
wwwwwwxjjj的博客
12-30 966
vue-router token 验证权限，是否跳转到登录页面 router.beforeEach(async(to, from, next) => { if (to.name === "login") { //防止页面死循环 next() } else { if (!store.getters.token) { next({ path: "login" }) } else { next
Vue前端简单的登录校验和规则
最新发布
qq_43618249的博客
05-09 188
为了防止用户未经登录就可以访问一些页面，同时保证部分页面不经登录就可以访问，我们可以配置相关的参数，进行登录校验。
vue通过router路由设置登录校验
徒挽的博客
10-18 905
在使用vue路由进行登录校验（表单中的数据和本地存储中的数据）的时候，可以使用前置路由守卫(初始化的时候被调用，每次路由切换之前被调用)进行校验
路由器的System Verilog验证平台
Andy_ICer的博客
12-23 2203
路由器的System Verilog验证平台
vue通过vue-router拦截实现登录验证
przlovecsdn的博客
08-31 7183
在实际开发中，有些页面需要登录之后才能访问，采用vue-router+vuex+elememt-ui+axios的方式实现。 以下是案列代码： login.vue <template> <div class="login"> <el-input type="text" v-model="username" placeholder="请输入用户名&qu
vue-router beforeEach跳转路由验证用户登录状态
10-17
主要介绍了vue-router beforeEach跳转路由验证用户登录状态,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Vue-Router源码分析路由实现原理
11-28
5. 将创建的VueRouter实例注入到Vue根实例中。 6. 使用`<router-link>`和`<router-view>`组件进行导航和视图展示。 Vue-Router的核心在于它的路由匹配和组件渲染。当URL改变时，Vue-Router会根据当前URL找到匹配的...
vue-router-demo
12-24
虽然Vue Router自身并不强制使用Flow，但在项目中使用可以增强代码的健壮性。 4. `.gitignore`：Git的忽略文件列表，定义了哪些文件或文件夹不应该被Git版本控制跟踪。这通常包括构建产物、缓存文件等。 5. `...
Vue-router入门教程笔记
06-27
通过这个Vue-router入门教程，你可以快速掌握如何在Vue项目中管理和导航页面，进一步提升开发效率和用户体验。持续学习和实践，你将能更好地利用Vue-router的高级特性和功能，为你的SPA应用构建出更加灵活和强大的...
vue-router3.0.1.js.zip
08-04
Vue Router是Vue.js官方推荐的路由管理器，它与Vue.js深度集成，使得在单页面应用（SPA）中管理导航和页面状态变得简单易行。Vue Router 3.0.1是该库的一个版本，提供了许多特性以支持高效且灵活的路由配置。 Vue ...
vue路由跳转时，判断是否登录及权限验证
weixin_59326394的博客
06-05 1196
3、在login.vue登录页面中进行相应判断，根据登录状态及所接收参数判断登录之后是否需要跳转到对应页面。2、在main.js中引入router.js。1、router.js路由内部写法。
vue 通过vue router 动态添加路由来实现权限管理
Yangliwei的博客
07-26 2515
1,需求: 需要判断超级管理员和普通管理员的权限,不同管理员有不同的页面,通过一个登录页登录 2,思路: 1,提前写好超级管理员和普通管理员的路由表 2,在登录的时候,登录成功哪个管理员就添加哪个管理员的路由表 3,实现: 1,先定义基本的路由表:router.js import Vue from "v...
vue+router.beforeEach实现登录验证路由拦截
一只程序喵
02-20 1409
1.在配置路由路径的文件夹里加上如下图的语句 2.在main.js里添加 3.login.vue <template> <div> <!-- 表单--> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> ...
Vue-router中beforeEach钩子函数实现路由拦截，判断用户权限跳转至登录页面。
热门推荐
weixin_43835652的博客
11-28 1万+
网站中很常见的一个需求是登录验证，即未登录时跳转至登录页。在vue项目中，使用vue-route 提供的 beforeRouteUpdate函数可以实现路由判断。 首先在配置的路由中加入  requireAuth: true，代表进入该路由需要验证 { path:'/XXXXX', name:'xxxx', meta: { requireAut...
用 vue-route 的 beforeEach 实现导航守卫（路由跳转前验证登录）
高山景行，一尘不染
03-04 904
登录信息存储： const data = { name: "lili" }; this.$store.commit("login", data); //存储用户信息 store: state: { isLogin: "" }, mutations: { login(state, info) { let login = i...
vue-router 钩子函数（路由拦截)，判断用户是否登录，未登录拦截
csl125的博客
05-22 7809
1、全局的钩子 beforeEach（to，from，next） afterEach（to，from，next） 2、组建内的导航钩子 组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的 methods: {}, beforeRouteLeave (to, from,...
VUE登录权限管理
lancerFm的博客
12-31 6070
一、项目需求 二、实现思路 三、实现方法
vue-router应用——用户登录注册案例
05-24
import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，我们新建一个router.js文件，用于配置路由。在该文件中，我们需要定义路由路径和路由组件： ``` import Vue from 'vue' import VueRouter ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值