springboot + vue整合（token的前端使用）

springboot + vue 整合 体验记录（一）

Vue 之 安装配置

1. 安装nodejs,配置环境变量及淘宝镜像。
2. 安装vue脚手架， npm install --global vue-cli
3. 创建 VUE项目，使用vue ui，在手动创建项目中选择Router和Vuex功能
4. 添加element UI，npm i element-ui -S
5. 引入axios依赖，npm install axios --save
6. 启动项目，在idea中配置添加npm配置并设置Cripts属性为serve

Vue 之 初步使用

1. 在项目根目录下打开package.json文件，查看dependencies属性检查项目所需依赖是否引入
2. 在main.js文件中引入所需的依赖

//添加ElementUI到项目中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//添加axios到项目中
import axios from 'axios'
import './axios'
Vue.prototype.$axios = axios

3. 前端访问路由的基本使用，进入router文件夹，打开index.js文件进行配置

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

//添加自定义的Vue文件，我是将文件创建在views文件夹下
import BookManager from "../views/BookManager";
import AddBook from "../views/AddBook"
import Index from "../views/Index"
import UpdateBook from "../views/UpdateBook"

Vue.use(VueRouter)

const routes = [
    //设置路由访问
  {
    path: "/",
    name: "图书管理",
    component: Index,
    redirect: "/BookManager",
    show: true,
    children: [
      {
        path: "/BookManager",
        name: "查询图书",
        component: BookManager
      },
      {
        path: "/AddBook",
        name: "添加图书",
        component: AddBook
      }
    ]
  },
  {
    path: "/update",
    name: "修改图书",
    show: false,
    component: UpdateBook
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4. 路由标签，根据路径层级进行判断所放位置

{
    path: "/",
    name: "one",
    component: one,
    children: [
      {
        path: "/two",
        name: "two",
        component: two,
		children: [
      		{
       			path: "/three",
        		name: "three",
        		component: three
      		}
      }
  ]
}

说明
路径path中使用 / 表示指向的是APP.vue这个模块，需要在这个模块中添加<router-view>标签
标签添加好后这个标签所在位置会显示one模块的子模块，也就是two中的内容
在two模块页面中再次添加<router-view>标签，则会显示two的子模块中的内容
如此便可以实现循环嵌套

Vue 之 获取运用后端返回的token

登录请求获取后端返回的token数据

submitForm(formName) {
     this.$refs[formName].validate((valid) => {
           if (valid) {
                const _this = this
                //向后端请求登录业务
                this.$axios.post(
                	"/user/login",
                    this.ruleForm
                 ).then(response => {
                    //需要注意的是在这个回调函数中，this指代的是这个回调函数，而不是全局的对象
                    //const jwt = response.headers['authorization'];
                    //console.log(jwt);
                    _this.$message({
                    message: response.data.message,
                    type: 'success'
                  });
                    //将token和user对象存入本地存储，以便需要的时候调用
                         _this.$store.commit("SET_TOKEN",response.data.data.token);                          _this.$store.commit("SET_USERINFO",response.data.data.user);
                    //重定向到指定页面
                       this.$router.replace("/");
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }

存储token和user数据到本地

//修改的是store文件夹下的index.js文件
export default new Vuex.Store({
    //定义变量并赋值
  state: {
    token: localStorage.getItem("token"),
    userInfo: JSON.parse(localStorage.getItem("userInfo"))
  },
  mutations: {
      //定义方法，将数据存储到本地存储
    SET_TOKEN: (state, token)=>{
      state.token = token;
      localStorage.setItem("token",token)
    },
    SET_USERINFO: (state, userInfo)=>{
      state.userInfo = userInfo;
      localStorage.setItem("userInfo",JSON.stringify(userInfo));
    },
    REMOVE_INFO: (state) => {
      state.token = "";
      state.userInfo = {};
      localStorage.setItem("token",'');
      localStorage.setItem("userInfo",JSON.stringify(''));
    }
  },
  getters:{
      //定义方法获取本地存储中的数据
    getUser: state => {
      return state.userInfo;
    },
    getToken: state => {
      if (state.token == null){
        return ''
      }else {
        return state.token;
      }
    }
  },
  actions: {
  },
  modules: {
  }
})

使用axios发送请求携带token请求头

this.$axios.get(
    "/course/getAll,
                    { //请求头中携带token
                        headers: {
                            "Authorization":  this.$store.getters.getToken
                        }
                    }).then(response => {
                    _this.tableData = response.data.data.list
                    _this.total = response.data.data.total;
                })

请求后端默认携带请求头的配置

//创建axios.js文件，在main.js文件中引入
//前置拦截
axios.interceptors.request.use(config =>{
    if (store.state.token) {
        console.log(store.state.token);
        // 让每个请求携带自定义token 请根据实际情况自行修改
        config.headers['Authorization'] = store.state.token
    }
    return config;
})