在线考试系统（五）路由守卫

hash模式替换history模式

hash模式（vue默认模式）
利用 AJAX，我们可以不重载页面就刷新数据，
如果再加上 # 号的特性（即改变 URL 却不请求后端），
我们就可以在前端实现页面的整体变化，而不用每次都去请求后端
为了实现前端路由，我们可以监听 # 号后面内容的变化（hashChange），
从而动态改变页面内容。URL 的 # 号后面的地址被称为 hash
这种实现方式我们称之为 Hash 模式，是非常典型的前端路由方式。
histroy模式
这种方式使用了 History API，History API 顾名思义就是针对历史记录的 API ，
这种模式的原理是先把页面的状态保存到一个对象（state）里，
当页面的 URL 变化时找到对应的对象，从而还原这个页面
原本这个功能是为了方便浏览器前进后退的
现在使用了这种模式，就可以摆脱 # 号实现前端路由

修改router.js

浏览器测试

前置守卫配置

路由守卫总共有7个
全局路由守卫:
beforeEach 前置守卫
affterEach 后置守卫
beforeResolve 解析守卫
路由的守卫
beforeRouterEnter 进入组件之前触发,在Created前面
beforeRouterUpdated 路由更新但是内容不会改变
beforeRouterLeave 离开之前触发,在beforeDestory之前触发
路由独享守卫
beforeEnter 读取路由的信息

重构main.js

浏览器测试

不管访问什么路径都是重定向到登录页面

重构后端UserInfoVO

增加token属性

重构后端Login方法

重构前端Login.vue

测试

浏览器只有登录后才能重定向到首页，直接访问首页会重定向到登录页面
新开一个窗口，访问也是重定向到登录页面，这种方式有bug，就是在浏览器控制台输入下面的代码

window.sessionStorage.setItem('token', JSON.stringify({"admin":"123"}));
window.sessionStorage.setItem('role', '[{"roleId":"admin"}]');

即可绕过登录访问系统，直接访问localhost:8080/index即可访问首页