前端学习(2705):重读vue电商网站26之路由导航守卫控制访问权限

 

如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。

在之前的操作中,我们登录之后会种植一个 token 值,表示我们登录成功了,那么此时我们将 token 值去掉呢?

直接点击上述 clear all 按钮去掉之后,我们依旧是可以访问 /home的路由,没有登录也能访问我们的后台主页,这肯定不是我们想要的结果。

在 router/index.js 中进行相关配置,具体如下,调用路由实例 router的 beforeEach方法,即可挂载我们的路由导航守卫

这里可能会有疑问,我们需要验证 token的正确性吗?
答案是不需要,因为前端只需要管要不要给用户呈现这个页面,而我们调用api时,后端会对我们的 token 值进行校验,前端不需要验证。

退出功能

基于 token 的方式实现退出比较简单,只需要销毁本地的 token 即可。这样,后续的请求就不会携带 token ,必须重新登录生成一个新的 token 之后才可以访问页面。

那么,我们仅需要为退出按钮绑定一个事件即可。

然后事件内容就是:先清空 token,然后跳转到我们的登录页面。

核心代码如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unable to delete directory: D:\Downloads\githubdownfive\tianxmyapp\library\

Clean项目的时候报错。这个问题简单 关掉之前的项目再Clean就可以了

时隔多日,旧域名重用,niceyoo博客上线

前言 从昨天我的年算过完了,亲戚同学也走过来了,实在是觉得无聊,所以就开始在论坛呀、博客呀什么的乱逛,突然记起来博客好久没写了,不过并没着急写文章、 而是决定搭建一个域名博客,也算是一个激励自己学习…

JS 内置对象

对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索、发现、征服。 我们都知道,JavaScript有3大对象,分别是本地对象、内置对象和宿主对象。 在此引…

iptables封禁端口

需求:之前运维的服务器,爆出漏洞,我要做的就是把5000接口封禁。 然后找了一些iptables的教程。最终解决方案如下: iptables -I FORWARD -p tcp --dport 5000 -j DROP执行完,立即生效 配套资料 1. 禁止指定 IP ipt…

为什么BDLocationListener没有被调用

百度地图定位bug 这个问题主要有两个因素 1、看这个key。有木有对 <meta-dataandroid:name"com.baidu.lbsapi.API_KEY"android:value"qn3ZT2xT7yDgbIgkaPooGpDdMjziASZj" /> 2、看这个服务有木有添加 <serviceandroid:name"com.baidu.lo…

前端学习(2706):重读vue电商网站26之JSON格式的配置文件

在项目根目录创建名为 .prettierrc 的文件&#xff0c;增加如下代码&#xff1a; Css {"semi": false,"singleQuote": true }semi设置 false去掉分号&#xff0c;singleQuote 设置 true使用单引号。 此外&#xff0c;还可以禁用 function 处空格报错&…

Android与服务器通信之socket通信

最近接触的一个案例需要用到通讯方式,首先想到的是socket通讯,–代码比较简单;然后就去网上查代码,找了很久发现一个大牛写的很详细>>> 跳转 一&#xff1a;Android&#xff1a;接收以及发送消息 1&#xff0c;首先实例化socket 即 socket new Socket(服务器IP, 服务…

easyexcel简单写入

官方文档 https://easyexcel.opensource.alibaba.com/ 1、导入依赖 目前最新版本3.1.1 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.1</version> </dependency>2、定义映射…

HTML 中的特殊字符

空格符 <小于号 < >大于号 > &和好 &amp; &#xffe5;人民币 &yen; © 版权 © 注册商标 &reg; ℃ 摄氏度 &deg; 正负号 &plusmn; 称号 &times; 除号 &divide; 2次方 &sup2; 3次方…

getLocationOnScreen不起作用原因

要在窗口获得焦点以后再去获取控件在屏幕上的绝对坐标&#xff0c;在onCreate或者onResume函数里使用&#xff0c;均得不到实际坐标。 解决方法 <TextViewandroid:layout_width"wrap_content"android:layout_height"wrap_content"android:onClick"…

Android Splash闪屏页秒开 Activity白屏、Activity黑屏问题

本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 今天在处理项目中闪屏界面的时候&#xff0c;遇到程序第一次开启会出现白屏大约2秒左右&#xff0c;然后再执行闪屏&#xff0c;故找到该篇文章&#xff0c;问题解决&#xff1a; 本篇博客要剖析和解决的两个问题&…

前端学习(2707):重读vue电商网站27之通过axios请求拦截器添加 token

通过axios请求拦截器添加 token&#xff0c;保证拥有获取数据的权限。 原因是&#xff0c;后台那边除开登录的 api&#xff0c;其它都需要进行授权 。 因此&#xff0c;我们可以利用 axios 中interceptors属性&#xff0c;其中有一个成员 request&#xff0c;此时我们可以通过…

hutool学习-BeanUtil.copyProperties对象赋值

1、老的写法 for(int i 0;i <list.size();i) {HouseData data new HouseData();JSONObject one list.getJSONObject(i);data.setName(one.getStr("name"));data.setType(one.getStr("type"));data.setCode(one.getStr("code"));houseList…

mac osx 下 浏览器 开启 java

工作环境mac osx 浏览器 chrome:63.0.3239.132 (Official Build) (64-bit)firefox: 57.0.4 (64 位)safari:Version 11.0.1 (13604.3.5) 堡垒机的部分设置&#xff0c;需在单独的web后台&#xff0c;该后台依赖java&#xff0c;和之前 超微 Supermicro 的 web 管理类似&#xff…

Android 使用控件自定义背景实例

实例1 <?xml version"1.0" encoding"UTF-8"?> <!-- 底部圆角 白色背景 灰色边框 长方体 --> <layer-list xmlns:tools"http://schemas.android.com/tools"xmlns:android"http://schemas.android.com/apk/res/android&quo…

mac mongodb bson 导入

1、官网下载对应工具 https://www.mongodb.com/try/download/bi-connector 2、将文件解压&#xff0c;放置到bin目录中。 3、运行命令进行数据恢复 mongorestore -d db_name 文件夹目录 mongorestore -d yangdb /Users/caowei/Downloads/yang-admin-main/db/yang-admin4、…

网易新闻客户端链接

转自原文&#xff1a;http://blog.csdn.net/macwhirr123/article/details/46682161 最近在做一个新闻客户端&#xff0c;正好找到几个不错的链接&#xff0c;网易新闻的&#xff0c;如下 财经 http://c.m.163.com/nc/article/list/T1348648756099/0-20.html 时尚 http://c…

前端学习(2708):重读vue电商网站28之通过axios请求拦截器添加 token

通过axios请求拦截器添加 token&#xff0c;保证拥有获取数据的权限。 原因是&#xff0c;后台那边除开登录的 api&#xff0c;其它都需要进行授权 。 因此&#xff0c;我们可以利用 axios 中interceptors属性&#xff0c;其中有一个成员 request&#xff0c;此时我们可以通过…

ABAP表生成Java实体Bean

项目中需要将HR模块中的表数据同步到Java系统中&#xff0c;向外围系统提供分发与查询服务&#xff0c;涉及到的表有两百多张&#xff0c;字段好几千上万个&#xff0c;如果手工一张张这些ABAP表在Java系统数据库中创建一遍的话&#xff0c;工作量将非常大&#xff0c;而且容易…

java三大特性——封装,继承,多态

1、封装 使用封装有三大好处&#xff1a; 1、良好的封装能够减少耦合。 2、类内部的结构可以自由修改。 3、可以对成员进行更精确的控制。 4、隐藏信息&#xff0c;实现细节。 5、封装我们也能够对对象的出口做出很好的控制&#xff0c;访问入口做一些控制 如对实体类进行属性…