Spring Security+JWT+Vue 集成及权限认证(三)

简介: Spring Security+JWT+Vue 集成及权限认证(三)

index.js 内容

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import BlogLogin from '@/views/BlogLogin.vue'
import BlogIndex from '@/views/BlogIndex.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
     component: BlogLogin
    },
    {
      path: '/index',
      name: 'BlogIndex',
      component: BlogIndex
    },
    {
      path: '/login',
      name: 'login',
      component: BlogLogin
    }
  ]
})

前后端交互流程

使用 localhost:8080/login 访问登录页

index.vue

<template>
<div>
    <blog-header></blog-header>
    <hr/>
    <div>
      这是首页,嘻嘻嘻。
      <button v-on:click="targeAdmin">我是管理员</button>
      <button v-on:click="targeUser">我是用户</button>
    </div>
    <div>
      <textarea v-model="msg" cols="50" rows="20"></textarea>
    </div>
    <hr/>
    <blog-footer></blog-footer>
  </div>
</template>
<script>
import blogHeader from '@/views/BlogHeader.vue'
import blogFooter from '@/views/BlogFooter.vue'
export default {
  name: 'BlogIndex',
  // blogHeader/blogFooter组件给申明到components里面然后在template里面使用
  components: { blogHeader, blogFooter },
  data(){
    return {
      msg:''
    }
  },
  methods:{
    targeAdmin () {//该方法需要ROLE_ADMIN角色 和 admin:adminRoleList 权限标识才能访问 
      this.msg=''
      this.$axios
        .get('/admin/adminRoleList').then(res => {
          this.msg= JSON.stringify(res.data)
           console.log(res.data.title)
        })
        .catch(failResponse => {})
    },
    targeUser(){//该方法需要ROLE_USER角色 和 user:info权限标识才能访问
      this.msg=''
      this.$axios.get("/user/info").then(res => {
         this.msg= JSON.stringify(res.data)
         console.log(res.data.title)
      })
      .catch(failResponse => {})
    }
  }
}
</script>

管理员请求交互

输入账号:admin,密码:123456 登录成功,cookie 也设置进去了 接下来可以请求接口了

补充上一个重要的配置!

//引用axios,并设置基础URL为后端服务api地址
var axios=require('axios')
//前缀必须加上的请求接口地址 
axios.defaults.baseURL='http://127.0.0.1:8764'
//将API方法 绑定到全局
Vue.prototype.$axios=axios

流程如下:

请求后端接口 token 带上了

后端拦截到了,并知道当前的用户具有 ROLE_ADMINROLE_USER 角色,则放权通过

请求接口带有权限标识的我们对应的权限认证 handler 也拦截到了

普通用户请求交互

换个用户登录,账号:user,密码:123456,当前用户是没有接口权限标识 sys:role:info 的权限,不会放过权限认证,到达我们的未权限认证 handler:

总结

本次 Vue 之旅比较简单,只是简单的授权与权限认证、不认证(都给予对应的信息)至于全局拦截 code 后面再补上

SpringBoot 后端跨域支持「由于前端与后端端口不同,会导致前后端联调时出现跨域问题」,代码补上

@Configuration
public class CorsConfig {
    public CorsConfig() {
    }
    @Bean
    public CorsFilter corsFilter() {
        // 1. 添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
//        config.addAllowedOrigin("http://localhost:8080");
        config.addAllowedOrigin("*");
        // 设置是否发送cookie信息
        config.setAllowCredentials(true);
        // 设置允许请求的方式
        config.addAllowedMethod("*");
        // 设置允许的header
        config.addAllowedHeader("*");
        // 2. 为url添加映射路径
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**", config);
        // 3. 返回重新定义好的corsSource
        return new CorsFilter(corsSource);
    }
}

后端源码如下:https://github.com/vnjohn/springBoot-security

前端源码如下:https://github.com/vnjohn/security-vue

更多技术文章:vnjohn 博客



目录
相关文章
|
5天前
|
存储 安全 Java
SpringBoot搭建Spring Security 入门
SpringBoot搭建Spring Security 入门
24 0
|
23天前
|
安全 Java 数据库
后端进阶之路——万字总结Spring Security与数据库集成实践(五)
后端进阶之路——万字总结Spring Security与数据库集成实践(五)
|
23天前
|
安全 Java Maven
后端进阶之路——深入理解Spring Security配置(二)
后端进阶之路——深入理解Spring Security配置(二)
|
23天前
|
安全 Java 网络安全
后端进阶之路——综述Spring Security认证,授权(一)
后端进阶之路——综述Spring Security认证,授权(一)
|
20天前
|
XML 安全 前端开发
SpringSecurity系列(四) Spring Security 实现权限树形菜单
SpringSecurity系列(四) Spring Security 实现权限树形菜单
|
19天前
|
安全 Java 数据库
【SpringSecurity】Spring Security 和Shiro对比
【SpringSecurity】Spring Security 和Shiro对比
33 0
|
19天前
|
安全 Java 数据库
【Spring Security】Spring Security 前后端分离认证
【Spring Security】Spring Security 前后端分离认证
34 0
|
20天前
|
XML 安全 Java
SpringSecurity系列(三) Spring Security 表单登录
SpringSecurity系列(三) Spring Security 表单登录
|
20天前
|
安全 JavaScript Java
SpringSecurity系列(一) 初识 Spring Security
SpringSecurity系列(一) 初识 Spring Security
|
23天前
|
安全 Java 数据库
后端进阶之路——浅谈Spring Security用户、角色、权限和访问规则(三)
后端进阶之路——浅谈Spring Security用户、角色、权限和访问规则(三)

相关产品

  • 云迁移中心