《Vue3笔记》第22节:Vue3项目控制访问页面的权限

前一个小节的内容中,介绍了NProgress加载进度条插件的使用,这个小节来学习一下,如何控制界面的访问权限。

Vue3项目开发(微信文章集合)

1.1、运行效果

这个小节实现的权限控制效果,如下图所示:

在这里插入图片描述

从上图中可以看到,当不存在token的时候,会默认跳转到登录界面,登录成功之后,因为存在token信息,所以即使是用户直接访问/login界面,此时也会直接跳转到后台首页面。

1.2、实现思路

在实际的系统中,访问系统程序都需要登录,只有登录成功之后,才可以访问对应的系统界面,没有登录的情况下,访问某个界面则会自动跳转到登录界面,告知用户需要先登录。

那么,要如何实现这个权限控制呢?

一般在Web项目中,用户登录成功之后,后端接口都会返回一个token

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏,助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值