SpringBoot2后端项目-用户登录-中

目录

1、前端导航卫士

1.1、新建 首页

1.2 路由文件

2、登陆

2.1 分析

2.2 登录代码

3、Store

3.1、安装 vuex

3.2、使用 store

3.3 创建 User 模块

4、登录请求

4.1 新增 登录 方法的API

4.2 请求工具类中新增 响应拦截

 

---

分析：

前端 vue 部分（前端路由与导航守卫）：

1、添加一个首页（ src / views / index.vue），这个做测试用的，里面放一句简单话即可。等做完登录功能后再来修改这个页面

2、为这个首页添加 2 条路由，此时我们的路由规则里面已经有 3 条

const routes = [
  { path: '/login', component: Login },
  { path: '/index', component: Index },
  { path: '', redirect: 'index' }
]

3、添加一个 前端的导航守卫，为路由提供跳转和取消的功能

①、尝试从 cookie 中获取 token，若获取到 token，则判断要去的路径 == ‘/login’ ? 如果是要去 'login',则跳转到主页(index)

       若获取到token, 但要去的路径 != '/login'，那么则放行

②、如果从 cookie 中获取不到 token， 则跳转到 login 页面

③、设置 白名单，将 请求路径为 login 的设置为白名单放行， 若是不设置白名单，则可能出现 导航守卫的死循环问题

 

前端 vue 部分（Vuex 状态管理）：

Vuex 教程官网:      https://vuex.vuejs.org/zh/guide/state.html

为什么要使用这个状态管理?

我的理解：

在 vue 中 不同组件之间的数据 "传值" 和 "取值" 是很不方便。为了解决在不同组件之间相互传递数据， vuex提供了一种集中式存储的方式来管理组件。

Vuex 5大核心概念

我的理解:

State： 用于整个应用公共的存储数据的，也就是所谓的将需要 与其他组件共享的数据存放到 State 中

Getter： Vuex 提供了统一的获取 State 中共享数据的方法。

Mutation： Vuex 提供了统一的修改State 中共享数据的方法

Action：通常我们不直接使用 Mutation的方式修改数据， 而是在 Action 中调用 Mutation的方法来修改数据。另外一点 Action 可以包含异步操作。

module： 如果所有的 store 都写在一块，会显得很臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

在项目中怎么应用的？

①、安装 Vuex

②、创建 store，store中的state 不直接存放数据， 数据放到 store对应的 module 模块的state中。

③、每个 module 对应的模块都有 一套 state 、gettter、 mutation、 action

具体的使用将结合项目代码介绍

 

1、前端导航卫士

1.1、新建 首页

创建 src / views / index.vue 文件

<template>
  <div class="">
    <h1>这是index 首页</h1>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "",
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>

<style lang="scss" scoped>
</style>

1.2 路由文件

对路由文件 ( src / router / index.js ) 做如下修改:

①、import index.vue 和 auth.js (auth.js 文件内容在本章后面会提到)

②、新增 2 条路由规则

③、挂载前端导航卫士，规则：

       有 token（表示已经登陆过），要去 /login，直接跳转到首页

       有 token（表示已经登陆过），去其他的请求，直接放行

       没有 token （没登陆），如果要去免登陆页面（如 login），直接放行

       没有 token （没登陆），不是去免登陆页面的，从定向到 login 登陆页面。

      这里需要注意: 必须将 login 放到免登陆页面中, 否则前端导航守卫的逻辑会出现死循环

src / router / index.js 内容：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/login.vue'
import Index from '../views/index.vue'
import { getToken } from '@/utils/auth'
// 免登陆页面
const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
Vue.use(VueRouter)

const routes = [
  { path: '/login', component: Login },
  { path: '/index', component: Index },
  { path: '', redirect: 'index' }
]

const router = new VueRouter({
  routes
})
// 挂载前端路由导航
router.beforeEach((to, from, next) => {
  console.