南宁网站推广v1,展厅展馆设计,wordpress添加app文件,江苏做电缆桥架的公司网站文章目录前言一、前端路由二、使用 History 模式三、后端登录拦截器3.1. LoginController3.2. LoginInterceptor3.3. WebConfigurer3.4. 效果检验四、Vuex 与前端登录拦截器4.1. 引入 Vuex4.2. 修改路由配置4.3. 使用钩子函数判断是否拦截4.4. 修改 Login.vue4.5. 效果检验前言…
文章目录前言一、前端路由二、使用 History 模式三、后端登录拦截器3.1. LoginController3.2. LoginInterceptor3.3. WebConfigurer3.4. 效果检验四、Vuex 与前端登录拦截器4.1. 引入 Vuex4.2. 修改路由配置4.3. 使用钩子函数判断是否拦截4.4. 修改 Login.vue4.5. 效果检验前言
这一篇主要讲前端路由与登录拦截器的实现。放在一起讲是因为我在开发登录拦截器时因为这个路由的问题遇到了很多坑花费了很长时间网上的解决方案都不怎么靠谱综合了好几种办法才最终成功其实关于这个部分能写两三篇文章名字起好了还能多很多访问量不过为了保证文章的质量我没有这么做毕竟我不是大神如果再不用点心写出来的文章自己都不想再看第二遍更别提能对大家有所帮助了。
一、前端路由
大家如果留心观察就会发现之前我们做的页面的 URL 里有一个 # 号这个 # 号有什么含义呢
假设在 html 中有这么一段代码div idtestThis is a test/div如果我们想让页面定位到这个 div 所在的位置可以加一个超链接 a herf#testJump to test/a这里的 # 被称为“锚点”点击超链接可以发现网页的 URL 发生了变化但页面并不会跳转。
在互联网流量如此庞大的今天我们需要想办法后端服务器的压力利用 AJAX我们可以不重载页面就刷新数据如果再加上 # 号的特性即改变 URL 却不请求后端我们就可以在前端实现页面的整体变化而不用每次都去请求后端。
为了实现前端路由我们可以监听 # 号后面内容的变化hashChange从而动态改变页面内容。URL 的 # 号后面的地址被称为 hash 估计是哪个大神拍脑袋想的不用深究。这种实现方式我们称之为 Hash 模式是非常典型的前端路由方式。
另一种常用的方式被称为 History 模式这种方式使用了 History APIHistory API 顾名思义就是针对历史记录的 API 这种模式的原理是先把页面的状态保存到一个对象state里当页面的 URL 变化时找到对应的对象从而还原这个页面。其实原本人家这个功能是为了方便浏览器前进后退的不得不说程序员们的脑洞真大。使用了这种模式就可以摆脱 # 号实现前端路由。
Vue 已经为我们提供了两种模式的前端路由无需我们自己去实现。
二、使用 History 模式
首先我们把 Vue 中配置的路由从默认的 hash 模式切换为 histroy 模式。打开我们的前端项目 wj-vue修改 router\index.js加入 mode: history 这句话。整体代码如下
import Vue from vue
import Router from vue-router
// 导入刚才编写的组件
import AppIndex from /components/home/AppIndex
import Login from /components/LoginVue.use(Router)export default new Router({mode: history,routes: [// 下面是固定写法{path: /login,name: Login,component: Login},{path: /index,name: AppIndex,component: AppIndex}]
})运行项目访问不加 # 号的 http://localhost:8080/login 成功加载页面。 运行项目npm run dev 浏览器访问http://localhost:8080/login
接下来我们把前端打包后部署在后端。这不是前后端分离项目推荐的做法之前我们讲过其实应该把前后端分别部署在不同的服务器中但实际上仍有不少项目会选择把前后端整合在一起只使用一个服务器所以这里我们也提及一下这种方式但在之后的开发中不会这样部署。
先在项目目录执行 npm run build控制台输出如下内容表明执行完毕 这时在项目的 dist 文件夹下生成了 static 文件夹和 index.html 文件把这两个文件拷贝到我们后端项目的 wj\src\main\resources\static 文件夹下一定要注意这个位置这时后端配置的静态文件的 path虽然看起来很诡异但一般都不作修改。 接下来打开后端项目并运行访问 http://localhost:8443/index.html 注意输入后缀 .html发现页面是空白的但确实取到了这个页面。 再访问 http://localhost:8443/login ,发现跳转到了错误页面White Error Page 这里我们回顾一下单页面应用的概念在我们这个项目中其实只有 index.html 这一个页面所有的其它内容都是在这个页面里动态渲染的。当我们直接在后端访问 /login 路径时服务器会后端并没有这个路径对应的内容所以返回了 Error Page。
为了获取到我们需要的内容我们要想办法触发前端路由即在后端添加处理内容把 通过这个 URL 渲染出的 index.html 返回到浏览器。
在后端项目中新建一个 package 名为 error新建实现 ErrorPageRegistrar 接口的类 ErrorConfig把默认的错误页面设置为 /index.html代码如下
package com.gblfy.wj.error;import org.springframework.boot.web.server.ErrorPageRegistrar;
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistry;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;Component
public class ErrorConfig implements ErrorPageRegistrar {Overridepublic void registerErrorPages(ErrorPageRegistry registry) {ErrorPage error404Page new ErrorPage(HttpStatus.NOT_FOUND, /index.html);registry.addErrorPages(error404Page);}}重新启动项目访问 http://localhost:8443/login 成功进入登录页面。 三、后端登录拦截器
为了完善登录功能我们需要限制未登录状态下对核心功能页面的访问。登录拦截可以由多种方式来实现我们首先讲解后端拦截器的开发。注意如果没有把前后端项目整合起来就没有办法使用这种方式
一个简单拦截器的逻辑如下
1.用户访问 URL检测是否为登录页面如果是登录页面则不拦截 2.如果用户访问的不是登录页面检测用户是否已登录如果未登录则跳转到登录页面
3.1. LoginController
首先我们修改 LoginController 的内容。之前我们实现了通过查询数据库验证用户名是否正确但仅此而已。
为了保存登录状态我们可以把用户信息存在 Session 对象中当用户在应用程序的 Web 页之间跳转时存储在 Session 对象中的变量不会丢失这样在访问别的页面时可以通过判断是否存在用户变量来判断用户是否登录。这是一种比较简单的方式感兴趣的同学可以尝试别的方法。
修改后的代码内容如下
package com.gblfy.wj.controller;import com.gblfy.wj.pojo.User;
import com.gblfy.wj.result.Result;
import com.gblfy.wj.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;import javax.servlet.http.HttpSession;Controller
public class LoginController {AutowiredUserService userService;CrossOriginPostMapping(value /api/login)ResponseBodypublic Result login(RequestBody User requestUser, HttpSession session) {String username requestUser.getUsername();username HtmlUtils.htmlEscape(username);User user userService.get(username, requestUser.getPassword());if (null user) {return new Result(400);} else {session.setAttribute(user, user);return new Result(200);}}
}其实只是添加了一条语句 session.setAttribute(“user”, user);
3.2. LoginInterceptor
新建 package 名为 interceptor新建类 LoginInterceptor。
Interceptor 即拦截器在 Springboot 我们可以直接继承拦截器的接口然后实现 preHandle 方法。preHandle 方法里的代码会在访问需要拦截的页面时执行。 代码如下
package com.gblfy.wj.interceptor;import com.gblfy.wj.pojo.User;
import org.apache.commons.lang.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;public class LoginInterceptor implements HandlerInterceptor {Overridepublic boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {HttpSession session httpServletRequest.getSession();String contextPath session.getServletContext().getContextPath();String[] requireAuthPages new String[]{index,};String uri httpServletRequest.getRequestURI();uri StringUtils.remove(uri, contextPath /);String page uri;if (begingWith(page, requireAuthPages)) {User user (User) session.getAttribute(user);if (user null) {httpServletResponse.sendRedirect(login);return false;}}return true;}private boolean begingWith(String page, String[] requiredAuthPages) {boolean result false;for (String requiredAuthPage : requiredAuthPages) {if (StringUtils.startsWith(page, requiredAuthPage)) {result true;break;}}return result;}
}看起来似乎比较长其实就是判断 session 中是否存在 user 属性如果存在就放行如果不存在就跳转到 login 页面。这里使用了一个路径列表requireAuthPages可以在里面写下需要拦截的路径。当然我们也可以拦截所有路径那样就不用写这么多了但会有逻辑上的问题就是你访问了 \login 页面仍然会需要跳转这样就会引发多次重定向问题。
3.3. WebConfigurer
我们写完了拦截器但是它却并不会生效因为我们还没有把它配置到项目中。
新建 package 名为 config新建类 MyWebConfigurer代码如下
package com.gblfy.wj.config;import com.gblfy.wj.interceptor.LoginInterceptor;
import org.springframework.boot.SpringBootConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.*;SpringBootConfiguration
public class MyWebConfigurer implements WebMvcConfigurer {Beanpublic LoginInterceptor getLoginIntercepter() {return new LoginInterceptor();}Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(getLoginIntercepter()).addPathPatterns(/**).excludePathPatterns(/index.html);}
}通过这个配置类我们添加了之前写好的拦截器。这里有一句非常重要的语句即
registry.addInterceptor(getLoginIntercepter()).addPathPatterns(/**).excludePathPatterns(/index.html);这条语句的作用是对所有路径应用拦截器除了 /index.html。
之前我们在拦截器 LoginInterceptor 中配置的路径即 index触发的时机是在拦截器生效之后。也就是说我们访问一个 URL会首先通过 Configurer 判断是否需要拦截如果需要才会触发拦截器 LoginInterceptor根据我们自定义的规则进行再次判断。
/index 与 /index.html 是不同的也就是说 /index 会触发拦截器而 /index.html 不会但根据拦截器 LoginInterceptor 中我们定义的判断条件以 /index 开头的路径都会被转发包括 index.html。
因为我们做的是单页面应用之前通过配置 ErrorPage实际上访问所有路径都会重定向到 /index.html 。我们直接在浏览器地址栏输入 /index 会触发拦截器经过拦截器重定向到 /login然后 /login 再经过 Configurer 的判断再次触发拦截器由于不在需要拦截的路径中所以被放行页面则重新定向到了 /index.html如果没有再 Configurer 中取消对 /index.html 的拦截则会再次触发拦截器再次重定向到 /login引发如下错误。 上述过程比较绕这是我开发时的失误但我觉得恰好可以帮助大家理解拦截器与单页面应用所以保留了下来。
3.4. 效果检验
运行后端项目访问http://localhost:8443/index发现页面自动跳转到了 http://localhost:8443/login输入用户名和密码登录跳转到 http://localhost:8443/index 这时可以把浏览器标签关掉再在一个新标签页输入 http://localhost:8443/index 发现不会被拦截。
四、Vuex 与前端登录拦截器
前面我们使用了后端拦截器但这种拦截器只有在将前后端项目整合在一起时才能生效而前后端分离的项目实际上不推荐这么做接下来我们尝试用前端实现相似的功能。
实现前端登录器需要在前端判断用户的登录状态。我们可以像之前那样在组件的 data 中设置一个状态标志但登录状态应该被视为一个全局属性而不应该只写在某一组件中。所以我们需要引入一个新的工具——Vuex它是专门为 Vue 开发的状态管理方案我们可以把需要在各个组件中传递使用的变量、方法定义在这里。之前我一直没有使用它所以在不同组件传值的问题上十分头疼要写很多多余的代码来调用不同组件的值所以推荐大家从一开始就去熟悉这种管理方式。
4.1. 引入 Vuex
在我们的项目文件夹中运行 npm install vuex --save之后在 src 目录下新建一个文件夹 store并在该目录下新建 index.js 文件在该文件中引入 vue 和 vuex代码如下 安装前 安装后
import Vue from vue
import Vuex from vuexVue.use(Vuex)
之后我们在 index.js 里设置我们需要的状态变量和方法。为了实现登录拦截器我们需要一个记录用户信息的变量。为了方便日后的扩展权限认证等我们使用一个用户对象而不是仅仅使用一个布尔变量。同时设置一个方法触发这个方法时可以为我们的用户对象赋值。完整的代码如下
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({state: {user: {username: window.localStorage.getItem(user || []) null ? : JSON.parse(window.localStorage.getItem(user || [])).username}},mutations: {login (state, user) {state.user userwindow.localStorage.setItem(user, JSON.stringify(user))}}
})
这里我们还用到了 localStorage即本地存储在项目打开的时候会判断本地存储中是否有 user 这个对象存在如果存在就取出来并获得 username 的值否则则把 username 设置为空。这样我们只要不清除缓存登录的状态就会一直保存。
4.2. 修改路由配置
为了区分页面是否需要拦截我们需要修改一下 src\router\index.js在需要拦截的路由中加一条元数据设置一个 requireAuth 字段如下 {path: /index,name: AppIndex,component: AppIndex,meta: {requireAuth: true}}完整的 index.js 代码如下
import Vue from vue
import Router from vue-router
import AppIndex from /components/home/AppIndex
import Login from /components/LoginVue.use(Router)export default new Router({mode: history,routes: [{path: /login,name: Login,component: Login},{path: /index,name: AppIndex,component: AppIndex,meta: {requireAuth: true}}]在这里插入代码片
})4.3. 使用钩子函数判断是否拦截
钩子函数及在某些时机会被调用的函数。这里我们使用 router.beforeEach()意思是在访问每一个路由前调用。
打开 src\main.js 首先添加对 store 的引用
import store from ./store
并修改 Vue 对象里的内容
new Vue({el: #app,render: h h(App),router,// 注意这里store,components: { App },template: App/
})接着写 beforeEach() 函数
router.beforeEach((to, from, next) {if (to.meta.requireAuth) {if (store.state.user.username) {next()} else {next({path: login,query: {redirect: to.fullPath}})}} else {next()}}
)这个的逻辑很简单首先判断访问的路径是否需要登录如果需要判断 store 里有没有存储 user 的信息如果存在则放行否则跳转到登录页面并存储访问的页面路径以便在登录后跳转到访问页。
完整的 main.js 代码如下
import Vue from vue
import App from ./App
import router from ./router
import store from ./store// 引入ElementUI
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.cssvar axios require(axios)
// 设置反向代理前端请求默认发送到 http://localhost:8443/api
axios.defaults.baseURL http://localhost:8443/api
// 全局注册之后可在其它组件中通过 this.$axios 发送数据
Vue.prototype.$axios axios
Vue.config.productionTip false
// Vue使用ElementUI
Vue.use(ElementUI)router.beforeEach((to, from, next) {if (to.meta.requireAuth) {if (store.state.user.username) {next()} else {next({path: login,query: {redirect: to.fullPath}})}} else {next()}
}
)/* eslint-disable no-new */
new Vue({el: #app,render: h h(App),router,// 注意这里store,components: { App },template: App/
})4.4. 修改 Login.vue
之前的登录组件中我们只是判断后端返回的状态码如果是 200就重定向到首页。在经过前面的配置后我们需要修改一下登录逻辑以最终实现登录拦截。
修改后的逻辑如下
1.点击登录按钮向后端发送数据 2.受到后端返回的成功代码时触发 store 中的 login() 方法把 loginForm 对象传递给 store 中的 user 对象 *这里只是简单的实现在后端我们可以通过用户名和密码查询数据库获得 user 表的完整信息比如用户昵称、用户级别等返回前端并传递给 user 对象以实现更复杂的功能 3.获取登录前页面的路径并跳转如果该路径不存在则跳转到首页
修改后的 login() 方法如下
login () {var _this thisconsole.log(this.$store.state)this.$axios.post(/login, {username: this.loginForm.username,password: this.loginForm.password}).then(successResponse {if (successResponse.data.code 200) {// var data this.loginForm_this.$store.commit(login, _this.loginForm)var path this.$route.query.redirectthis.$router.replace({path: path / || path undefined ? /index : path})}}).catch(failResponse {})
}完整的 Login.vue 代码如下
templatebody idposterel-form classlogin-container label-positionleftlabel-width0pxh3 classlogin_title系统登录/h3el-form-itemel-input typetext v-modelloginForm.usernameauto-completeoff placeholder账号/el-input/el-form-itemel-form-itemel-input typepassword v-modelloginForm.passwordauto-completeoff placeholder密码/el-input/el-form-itemel-form-item stylewidth: 100%el-button typeprimary stylewidth: 100%;background: #505458;border: none v-on:clicklogin登录/el-button/el-form-item/el-form/body
/templatescriptexport default {name: Login,data () {return {loginForm: {username: admin,password: 123},responseResult: []}},methods: {login () {var _this thisconsole.log(this.$store.state)this.$axios.post(/login, {username: this.loginForm.username,password: this.loginForm.password}).then(successResponse {if (successResponse.data.code 200) {// var data this.loginForm_this.$store.commit(login, _this.loginForm)var path this.$route.query.redirectthis.$router.replace({path: path / || path undefined ? /index : path})}}).catch(failResponse {})}}}
/scriptstyle#poster {background:url(../assets/eva.jpg) no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;}.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}/style4.5. 效果检验
同时运行前后端项目访问 http://localhost:8080/index 发现页面直接跳转到了 http://localhost:8080/login?redirect%2Findex
输入账号密码后登录成功跳转到 http://localhost:8080/index 之后再次访问则无需登录除非清除缓存。
读者大人们请原谅我没有及时更新作为一个不知名博主十分感谢大家的支持。我会坚持下去的希望大家都能坚持做自己想做的事一起变得更加牛批
