酒业网站模板下载,饶平网站建设公司,辽宁住房和建设厅网站首页,常见的搜索引擎有哪些?1、会话存储、本地存储
前端浏览器中存储用户信息#xff0c;会话存储、本地存储、cookie
会话存储#xff08;sessionStorage#xff09;#xff1a;会话期间存储#xff0c;关闭浏览器后#xff0c;数据就会销毁
sessionStorage.setItem(account,resp.d…1、会话存储、本地存储
前端浏览器中存储用户信息会话存储、本地存储、cookie
会话存储sessionStorage会话期间存储关闭浏览器后数据就会销毁
sessionStorage.setItem(account,resp.data.result.account);//会话存储 根据后端响应回来的结果进行处理resp.data(result对象)
var accountsessionStorage.getItem(account); 获取account值用来在浏览器的显示。
本地存储localStorage即使关闭浏览器下次打开还是存在可以长久保存
setItem、getItem用法和sessionStorage的用法一样
2、路由导航守卫
使用的vue-router中的路由导航守卫在前端每次发生路由跳转时会触发beforeEach()进行拦截。
使用案例如在前端判断用户是否登录除了登录界面的组件其他界面组件都需要判断是否登录登录之后才可以进行访问。判断访问哪些组件、哪些组件需要登录哪些组件不需要登录
//路由导航守卫每当前端发生一次路由跳转时会自动的触发beforeEach()
rout.beforeEach((to,from,next){
if(to.path/login){//如果访问登录组件不需要做任何判断直接放行return next();//放行的目标组件}else{var account window.sessionStorage.getItem(account);if(accountnull){//用户信息为空说明没有登录return next(/login);}else{//说明用户已经登录next();}}
}) 3、web会话跟踪
会话从客户打开浏览器并连接的服务器开始到客户关闭浏览器离开服务器结束被称为一个会话。
为什么要会话跟踪因为http请求是无状态的只有当用户发出请求时服务器才会做出响应客户端与服务端之间的联系是离散的非连续的如果用户想在同一个网站的多个页面之间转换时无法确定是否是同一个用户对会话进行跟踪就是为了解决这样的问题。
会话跟踪是web程序中常用的技术用来跟踪用户的整个会话过程。给客户端颁发一个通行证每人一个无论谁访问都必须携带自己通行证这样服务器就能从通行证上确认客户身份了。
token
token是服务端生成的一串字符串以作客户端进行请求的一个令牌当第一次登录后服务器生成一个token便将此token返回给客户端以后客户端只需要带上这个token前来请求数据即可。token保存在客户端并且进行了加密保证了数据的安全性
目的token的目的是为了减轻服务器的压力是服务器更加健壮。 4、JWT生成token
引入JWT依赖由于是基于Java所以需要的是java-jwt
dependencygroupIdcom.auth0/groupIdartifactIdjava-jwt/artifactIdversion3.8.2/version/dependency 在学习初期直接用这段代码
package com.ffyc.dormserver.until;import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.ffyc.dormserver.model.Admin;import java.util.Date;
import java.util.HashMap;
import java.util.Map;/*** JWT工具类*/
public class JWTUtil {/*** 根据用户id,账号生成token* param admin* return */public static String getToken(Admin admin) {String token ;try {//过期时间 为1970.1.1 0:0:0 至 过期时间 当前的毫秒值 有效时间Date expireDate new Date(new Date().getTime() 10*1000);//有效时间可以根据有需要进行修改//秘钥及加密算法Algorithm algorithm Algorithm.HMAC256(ZCEQIUBFKSJBFJH2020BQWE);//ZCEQIUBFKSJBFJH2020BQWE是进行加密//设置头部信息MapString,Object header new HashMap();header.put(typ,JWT);header.put(alg,HS256);//携带id账号信息生成签名token JWT.create().withHeader(header).withClaim(id,admin.getId()).withClaim(account,admin.getAccount()).withExpiresAt(expireDate).sign(algorithm);}catch (Exception e){e.printStackTrace();return null;}return token;}/*** 验证token是否有效* param token* return*/public static boolean verify(String token){try {//验签Algorithm algorithm Algorithm.HMAC256(ZCEQIUBFKSJBFJH2020BQWE);JWTVerifier verifier JWT.require(algorithm).build();DecodedJWT jwt verifier.verify(token);return true;} catch (Exception e) {//当传过来的token如果有问题,抛出异常return false;}}/*** 获得token 中playload部分数据,按需使用* param token* return*/public static DecodedJWT getTokenInfo(String token){return JWT.require(Algorithm.HMAC256(ZCEQIUBFKSJBFJH2020BQWE)).build().verify(token);}}生成token
//登录成功后向当前用户生成tokenString token JWTUtil.getToken(admin);
5、axios请求拦截 、响应拦截
请求拦截
使用axios框架向后端发送请求时都会经过拦截器我们将生成的token添加到请求头中
在main.js中进行配置
//axios 请求拦截,每当我们使用axios框架向后端发送请求时都会经过拦截器axios.interceptors.request.use(config {
//为请求头对象添加 Token 验证的 token 字段config.headers.token sessionStorage.getItem(token);return config;}) 以便与在后端进行token验证向前端进行一个响应。
下面是一个token验证过滤器示例
package com.ffyc.dormserver.filter;import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.dormserver.model.Result;
import com.ffyc.dormserver.until.JWTUtil;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
WebFilter(urlPatterns /api/*)
public class TokenFilter implements Filter{Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest request(HttpServletRequest)servletRequest;//向下转型String tokenrequest.getHeader(token);//获取请求体中的token//验证tokenboolean resJWTUtil.verify(token);if (res){filterChain.doFilter(servletRequest, servletResponse);}else {Result resultnew Result(401, 认证失败, null);servletResponse.getWriter().print(new ObjectMapper().writeValueAsString(result));}}
}响应拦截
通过后端响应的code进行拦截执行其他操作
在main.js中进行配置
// 添加响应拦截器axios.interceptors.response.use((resp) {//正常响应拦截if(resp.data.code500){ElementUI.Message({message:resp.data.desc,type:error})}if(resp.data.code401){ElementUI.Message({message:resp.data.desc,type:error})router.replace(/login);}return resp;});
