springsecurity+vue脚手架+redis完成前后端分离登录退出和权限检测的代码--前端

vue前端页面

搭建一个前端工程（使用vue脚手架搭建)

在main.js中修改配置

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
import axios from 'axios'	//导入axios
Vue.use(ElementUI)
Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:8088'	//设置跳转地址前缀
Vue.prototype.$axios = axios	//将axios放入Vue方法中,使用$axios调用
//设置响应拦截器
axios.interceptors.response.use(response => {
if (response.data.code === 200) {
 Vue.prototype.$message.success(response.data.msg);
 return response;
} else {
 Vue.prototype.$message.error(response.data.msg);
 return response;
}
})
//请求拦截器---设置携带token令牌--请求拦截器
axios.interceptors.request.use(config => {
var token = sessionStorage.getItem("token");
if (token) {
 config.headers.token = token;
}
return config;
})
//前置路由守卫 to: 即将要访问的路径 from: 从哪里来 next: 放行函数 前置路由守卫
router.beforeEach((to, from, next) => {
//如果用户访问的是登录页面，直接放行 ===比较值和引用
if (to.path === "/login") {
 //放行
 return next();
}
//获取sessionStorage中保存的token值
const token = window.sessionStorage.getItem("token");
//如果token不存在，强制跳转到登录页面
if (!token) {
 return next("/login");
}
//如果token存在，直接放行
next();
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')

编写router下的index.js的内容

import Vue from 'vue'
import VueRouter from 'vue-router'

// const originalPush = VueRouter.prototype.push
// //修改原型对象中的push方法
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }
Vue.use(VueRouter)

const routes = [
{
 path: '/',
 //重定向到login的路径
 redirect: '/login'
},
{
 path: "/login",
 name: "login",
 component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue')
},
{
 path: "/index",
 component: () => import(/* webpackChunkName: "index" */ '../views/Index.vue')
}
]

const router = new VueRouter({
routes
})

export default router

搭建页面

搭建登录页面

<template>
<div class="login-container">
 <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" label-width="80px">
   <h2 class="login-title">Login</h2>
   <el-form-item label="Username" prop="username">
     <el-input v-model="loginForm.username" placeholder="Enter your username"></el-input>
   </el-form-item>
   <el-form-item label="Password" prop="password">
     <el-input v-model="loginForm.password" type="password" placeholder="Enter your password"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="handleSubmit" :loading="loading">Login</el-button>
   </el-form-item>
 </el-form>
</div>
</template>
<script>
export default {
data() {
 return {
   loginForm: {
     username: '',
     password: ''
   },
   rules: {
     username: [
       { required: true, message: 'Please enter your username', trigger: 'blur' }
     ],
     password: [
       { required: true, message: 'Please enter your password', trigger: 'blur' }
     ]
   },
   loading: false
 };
},
methods: {
 handleSubmit() {
   this.$refs.loginForm.validate(valid => {
     if (valid) {
       this.$axios.post("/login?username=" + this.loginForm.username + "&password=" + this.loginForm.password).then(response => {
         if (response.data.code === 200) {
           sessionStorage.setItem("token", response.data.data);
           this.$router.push("/index");
         }
       })
     }
   });
 }
}
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f7fa;
}

.login-form {
width: 300px;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.login-title {
text-align: center;
margin-bottom: 20px;
}
</style>

搭建登陆成功的测试页面

<template>
<div>
 <button @click="look">查看</button>
 <button @click="Myexport">导出</button>
 <button @click="logout">退出</button>
</div>
</template>
<script>
export default {
methods: {
 logout() {
   this.$axios.post("/logout").then(res => {
     sessionStorage.removeItem("token")
     //跳转到登录页面
     this.$router.push("/login")
   })
 },
 look() {
   this.$axios.get("/user/select").then(res => {
     console.log(res.data)
   })
 },
 Myexport() {
   this.$axios.get("/user/export").then(res => {
     console.log(res.data)
   })
 }
}
}
</script>