(四)前端路由与登录拦截器——vue+springBoot实战

#hash模式和history模式(深入了解)

 

#登录拦截

方式之一:后端拦截,这种方法需要将前端打包,部署到后端

 

#拦截器的简单逻辑

1)用户访问URL

2)检测该URL是否为登录界面

3)是则不拦截,不是则检测是否为登录状态

4)登录状态不拦截,未登录则跳转到登录界面

 

#前端拦截

Vuex:它是专门为 Vue 开发的状态管理方案,我们可以把需要在各个组件中传递使用的变量、方法定义在这里

引入vuex:

1)cnpm install vuex --save

2)创建/src/store/index.js 不理解

3)修改路由配置

在需要拦截的路由下添加一条元数据

4)使用钩子函数判断是否拦截

钩子函数:在某些时刻会被调用函数

src/main.js 添加对store的引用

修改vue对象,添加store

添加beforeeach()钩子函数

修改login.vue

 

拦截设计总体流程:

使用vuex保存登录界面的用户状态——》修改路由配置,使登录页面的路由可进行拦截——》添加钩子函数,进行拦截处理

 

#同时运行前后端项目,访问 http://localhost:8080/index ,发现页面直接跳转到了 http://localhost:8080/login?redirect=%2Findex

 

Q:可以直接访问 http://localhost:8080/index

 

A:换一个浏览器才能实现拦截效果

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章