实现“shiro结合axios”可以简单理解为在前端使用axios发送请求时,通过shiro进行用户认证和权限控制。下面我将详细介绍实现的步骤和具体代码。
一、整体流程
下面是整个实现流程的表格展示:
步骤 | 描述 |
---|---|
1 | 在前端页面引入axios库 |
2 | 编写axios拦截器 |
3 | 在后端编写shiro认证和授权的相关代码 |
4 | 在后端配置shiro的过滤器链 |
5 | 前端使用axios发送请求 |
接下来,我将逐步介绍每一步需要做的事情,并提供相应的代码和注释。
二、具体步骤
1. 在前端页面引入axios库
在前端页面的<head>
标签内引入axios库的CDN链接,可以通过以下代码实现:
<script src="
2. 编写axios拦截器
在前端代码中,我们可以使用axios的拦截器来实现shiro认证和授权的功能。通过以下代码,我们可以编写一个axios拦截器:
// 创建axios实例
const axiosInstance = axios.create();
// 请求拦截器
axiosInstance.interceptors.request.use(
config => {
// 在请求发送之前,添加shiro的认证信息
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = 'Bearer ' + token;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
axiosInstance.interceptors.response.use(
response => {
// 在响应中可以进行权限校验等操作
return response;
},
error => {
return Promise.reject(error);
}
);
// 导出拦截器创建的axios实例
export default axiosInstance;
在上述代码中,我们创建了一个axios实例axiosInstance
,并分别编写了请求拦截器和响应拦截器。请求拦截器会在每次请求发送前,添加shiro的认证信息,响应拦截器可以进行权限校验等操作。
3. 在后端编写shiro认证和授权的相关代码
在后端,我们需要编写shiro认证和授权的相关代码。具体的实现方式根据后端框架不同而有所差异,这里给出一个简单的示例:
// 用户认证
public void login(String username, String password) {
// 通过用户名和密码进行认证
UsernamePasswordToken token = new UsernamePasswordToken(username, password);
SecurityUtils.getSubject().login(token);
}
// 用户授权
public void authorize(String permission) {
Subject subject = SecurityUtils.getSubject();
if (subject.isPermitted(permission)) {
// 用户拥有该权限,进行相应操作
} else {
// 用户没有该权限,进行相应处理
}
}
在上述示例中,login
方法实现了用户的认证功能,authorize
方法实现了用户的授权功能。
4. 在后端配置shiro的过滤器链
在后端,我们需要配置shiro的过滤器链,来实现对请求的过滤和权限控制。具体的配置方式如下:
@Bean
public ShiroFilterFactoryBean shiroFilterFactoryBean(DefaultWebSecurityManager securityManager) {
ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();
// 设置securityManager
shiroFilterFactoryBean.setSecurityManager(securityManager);
// 设置登录页面
shiroFilterFactoryBean.setLoginUrl("/login");
// 设置无权限页面
shiroFilterFactoryBean.setUnauthorizedUrl("/unauthorized");
// 配置过滤器链
Map<String, String> filterChainDefinitionMap = new LinkedHashMap<>();
filterChainDefinitionMap.put("/login", "anon"); // 登录接口不需要认证
filterChainDefinitionMap.put("/**", "authc"); // 其他接口需要认证
shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
return shiroFilterFactoryBean;
}
在上述代码中,我们通过`shiroFilterFactoryBean.set