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"


Vue.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;
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。