spring boot + shiro + vue 登录

最新推荐文章于 2024-07-26 19:01:04 发布

yetaot

最新推荐文章于 2024-07-26 19:01:04 发布

阅读量3.8k

点赞数 2

分类专栏： Spring boot 文章标签： spring boot vue axios

本文链接：https://blog.csdn.net/yetaot/article/details/88745547

版权

Spring boot 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考

spring boot 整合shiro 登录参考：spring boot 整合mybatis 和 shiro 实现登录

axios使用

基于promise用于浏览器和node.js的http客户端

axios安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios请求使用

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

springboot前后端分离

vue前端

项目目录结构

修改主配置参数

在main.js中引入

import axios from 'axios'  // 一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

import qs from 'qs'

设置为全局变量

Vue.prototype.$axios=axios
Vue.prototype.qs = qs

设置跨域默认请求地址

axios.defaults.baseURL = "http://localhost:8081/"     //配置默认发送请求到http://127.0.0.1:8081/

设置http拦截器

// http request 拦截器
axios.interceptors.request.use(
  function (config) {
    if (!window.sessionStorage.getItem('token')) {
      // console.log('>>>>> ' + router.currentRoute.fullPath)
      router.replace({
        path: '/login',
        query: {redirect: router.currentRoute.fullPath}
      })
    } else {
      console.log(window.sessionStorage.getItem('token'))
      config.headers.Authorization = window.sessionStorage.getItem('token')
    }
    console.log(config)
    return config;
  }, function (error) {
    return Promise.reject(error);
  })

// http response 拦截器
axios.interceptors.response.use(
  function (response) {
    return response
  },
  function (error) {
    if (error.response) {
      if (error.response.status == 401) {
        sessionStorage.removeItem('token')
        router.replace({
          href: '/login',
          query: {redirect: router.currentRoute.fullPath}
        })
      } else {
        next()
      }
      return Promise.reject(error.response.data)  // 返回接口返回的错误信息
    }
  })

设置url拦截器

// url 拦截
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    sessionStorage.removeItem('token');
  }
  let user = sessionStorage.getItem('user');
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else if(user && to.path != '/login' && to.path != '/404' && to.path != '/'){
    let allow = false
    if(to.path === '/hello'){
      allow = true
    }
    if (allow) {
      console.log('有权限进入' + to.path);
      next()
    } else {
      console.log('没有权限进入' + to.path);
      next({ path: '/404' })
    }
  } else {
    next()
  }
})

添加控制页面

在components中新建Login.vue

<template>
  <div id="login">
    <form>
      <label for="userName">用户名</label><input type="text" v-model="userName" name="userName" />
      <label for="password">密码</label><input type="password" v-model="password" name="password"/>
      <input type="button" value="登录" @click="doLogin"/>
    </form>
  </div>
</template>


<script>
  import qs from 'qs'
  export default {
    name: 'login',
    data () {
      return {
        userName: '',
        password: ''
      }
    },
    methods:{
      doLogin () {   //登录提交方法
        this.$axios.post('/login',
          qs.stringify({
            userName: this.userName,
            password: this.password,
          })
        )
          .then((response) => {
            console.log(response)
            sessionStorage.setItem('user', qs.stringify(response.data.result));
            sessionStorage.setItem('token', response.data.token);
            this.$router.replace({path: '/hello'})
         })
      }
    }
  }
</script>

编辑HelloWorld.vue 页面

<template>
  <div>
    <div class="hello">
      <button @click="sayOut">渲染</button>
    </div>
    <div>用户管理</div>
    <tr >
      <th>用户名</th>
      <th>年龄</th>
    </tr>
    <tr >
      <td>{{userName}}</td>
      <td>{{password}}</td>
    </tr>
  </div>
</template>


<script>
  export default {
    name: 'hello',
    data () {
      return {
        userName:'',
        password:''
      }
    },
    methods:{
      sayOut () {
        this.$axios.post('/user/userData')
          .then((response) => {
            this.userName = response.data.userName;
            this.password = response.data.password;
            console.log(response.data);
          }).catch(err => {
          console.log(err);
        })
      }
    }
  }

</script>

添加404页面

<template>
    <p class="page-container">404 page not found</p>
</template>

<style>
    .page-container {
        font-size: 40px;
        margin: 50px auto;
        text-align: center;
        color: rgb(192, 204, 218);
    }
    .page-container:hover {
        color: #f71833
    }
</style>

修改路由配置

修改router下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/HelloWorld'
import Login from '@/components/Login'
import NotFound from '@/components/404'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login,
      name: '',
      hidden: true
    },
    {
      path: '/404',
      component: NotFound,
      name: '',
      hidden: true
    },
    {
      path: '/hello',
      component: Hello,
      name: '',
      hidden: true
    }
  ]
})

Spring boot后端

项目目录结构

添加跨域拦截器

创建设置拦截器，在config目录下新建CorsConfig.java


@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 配置所有请求
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

}

配置拦截

SpringBoot实现WebMvcConfigurer接口做一些配置拦截

package cn.ac.sec.interceptor;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebSecurityConfig implements WebMvcConfigurer {
//extends WebMvcConfigurationSupport {   //后期要集成swagger，继承WebMvcConfigurationSupport会出现加载不了swagger的静态文件问题

	@Bean
    public LoginInterceptor getLoginInterceptor() {
        return new LoginInterceptor();
    }
    
	public void addInterceptors(InterceptorRegistry registry) {
        InterceptorRegistration addInterceptor = registry.addInterceptor(getLoginInterceptor());
        
        // 排除配置
        //addInterceptor.excludePathPatterns("/**");
        //addInterceptor.excludePathPatterns("/login**");

        // 拦截配置
        //addInterceptor.addPathPatterns("/**");
        addInterceptor.addPathPatterns("/user/**");
    }

}

添加一个Interceptor，作为测试


public class LoginInterceptor extends HandlerInterceptorAdapter {

	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
			return true;

	}

}

登录方法

稍微修改一下之前的登录接口。主要修改返回值以及返回类容

@PostMapping("/login")
    public Map<String, Object> login(HttpServletRequest request) {
		String loginName = request.getParameter("userName");
		String password = request.getParameter("password");
		System.err.println(loginName+"=="+password);
		Map<String, Object> map = new HashMap<>();
		Subject subject = SecurityUtils.getSubject();
		UsernamePasswordToken token = new UsernamePasswordToken(loginName,password);
		if (StringUtils.isNotEmpty(loginName) && StringUtils.isNotEmpty(password)) {
			try{
				subject.login(token);
				User user = (User)subject.getPrincipal();	
				subject.getSession().setAttribute("DT_LOGIN_USER", user);
				map.put("result", user);
				map.put("token", subject.getSession().getId());
			}catch(Exception ex){
				map.put("result", "fail");
			}
		} else {
			map.put("result", "fail");
		}
		return map;
    }

获取用户信息

添加UserController.java，用于登录成功后跳转获取用户信息测试

@RestController
@RequestMapping("/user")
public class UserController {

	@Autowired
	private UserService userService;
	
	@PostMapping("/userData")
	public String demo() {
		User user = userService.getUserByUserName("admin");
		return JSON.toJSONString(user);
	}
	
}

访问测试

浏览器访问http://localhost:8080/#/login

访问成功跳转

点击渲染显示数据

项目代码：https://gitee.com/yetaot/springBootDemo

yetaot

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
spring boot + shiro + vue 登录

目录参考axios使用axios安装axios请求使用axios拦截器springboot前后端分离vue前端项目目录结构修改主配置参数添加控制页面修改路由配置Spring boot后端项目目录结构添加跨域拦截器配置拦截登录方法获取用户信息访问测试参考spring boot 整合shiro 登录参考：spring bo...
复制链接

扫一扫