springboot+vue实现登录功能

springboot+vue实现登录功能

本文实例为大家分享了springboot+vue实现登录功能的具体代码，供大家参考，具体内容如下

目录结构

前端端口：8080

后端端口：8900

login.vue

提交

重置

Home.vue

安全退出

index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

// 引入login组件

import Login from '../components/login.vue'

import Home from '../components/Home.vue'

Vue.use(VueRouter)

const routes = [

{

path:"/",

redirect:"/login"

},

{

path:"/login",

component:Login

},

{

path:"/home",

component:Home

},

]

const router = new VueRouter({

routes

})

// 挂载路由导航守卫

router.beforeEach((to,from,next)=>{

// to将要访问

// from 从哪访问

// next 接着干next（url）重定向url上，继续访问to路径

if(to.path=='/login') return next();

// 获取user

const userFlag = window.sessionStorage.getItem("user");

// 无值返回登录页

if(!userFlag) return next('/login');

// 符合要求，放行

next();

})

export default router

main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import './plugins/element.js'

// 添加全局样式

import './assets/css/global.css'

// 引入icfont

import './assets/font/iconfont.css'

// 导入aioxs

import axios from 'axios'

// 挂载axios

Vue.prototype.$http = axios

// 设置访问根路径

axios.defaults.baseURL="http://localhost:9000"

IgDAaejQFVue.config.productionTip = false

new Vue({

router,

render: h => h(App)

}).$mount('#app')

后台实现

@RestController

public class LoginController {

@Autowired

UserDao userDao;

@PostMapping("login")

public String login(@RequestBody User user){

String flag = "fail";

User user1 = userDao.getUserByMessage(user.getUsername(),user.getPassword());

System.out.println("user"+user1);

if(user1!=null){

flag="ok";

}

Map map = new HashMap<>();

map.put("flag",flag);

map.put("user",user);

String param= JSON.toJSONString(map);

return param;

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。