1.Axios安装和接口封装

Axios是一个易用、简洁且高效的http库，使用Promise管理异步，支持请求和响应拦截器，自动转换JSON数据等高级配置，是在vue项目中十分常见前端请求库，使用以下指令安装。

npm install axiosnpm install js-cookie

为了便于后续接口管理，一般都将所有的接口单独放在同一目录下统一管理。在src下新建文件夹request，并创建文件src/request/http.js，后续对接口的baseURL、超时时间、请求和响应拦截、接口类型封装等都将在此文件中。
http.js

import axios from 'axios'
import Cookies from 'js-cookie'// 请求超时时间
axios.defaults.timeout = 10000 * 5
// 请求基础URL，对应后台服务接口地址
axios.defaults.baseURL = "http://localhost:8080"
// 自定义post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json'// 请求拦截器
axios.interceptors.request.use((config) => {//	自定义请求头config.headers['token'] = Cookies.get('token')return config},(error) => {//	请求错误时console.log(error) //	打印错误信息return Promise.reject(error)}
)// 响应拦截器
axios.interceptors.response.use((response) => {if (response.status === 200) {//	接口HTTP状态码为200时return Promise.resolve(response)}},// HTTP状态码非200的情况(error) => {if (error.response.status) {switch (error.response.status) {case 500: //	HTTP状态码500this.$message.error('后台服务发生错误')breakcase 401: //	HTTP状态码401this.$message.error('无权限')breakcase 404: //	HTTP状态码404this.$message.error('当前接口不存在')breakdefault:this.$message.error(error.response.message) //	页面显示接口返回的错误信息return Promise.reject(error.response)}}}
)/*** get方法，对应get请求*/
export function get(url, params, info = '') {return new Promise((resolve, reject) => {axios.get(url + info, {params: params}).then((res) => {resolve(res.data) //	返回接口响应结果}).catch((err) => {reject(err.data)})})
}/*** post方法，对应post请求* info为 true，formData格式；* info为 undefined或false，是json格式*/
export function post(url, data = {}, info) {return new Promise((resolve, reject) => {let newData = dataif (info) {//  转formData格式newData = new FormData()for (let i in data) {newData.append(i, data[i])}}axios.post(url, JSON.stringify(newData)).then((res) => {resolve(res.data)}).catch((err) => {reject(err.data)})})
}/*** 封装put请求*/export function put(url, params = {}, info = '') {return new Promise((resolve, reject) => {axios.put(url + info, params).then((res) => {resolve(res.data)},(err) => {reject(err.data)})})
}/*** 封装delete请求*/
export function Delete(url, params = {}, info = '') {return new Promise((resolve, reject) => {axios.delete(url + info, {params: params}).then((res) => {resolve(res.data)}).catch((err) => {reject(err.data)})})
}

在src/request下创建新文件user.js，所有与用户相关的接口均维护在这个文件中。

import { get, post } from './http'// 登录接口
export const login = (p) => get('/user/login', p)
// 注册接口
export const addUser = (p) => post('/user/register', p)
// 获取登录状态及用户信息
export const checkToken = p => get('/user/checkToken', p);

2.创建登录页面

修改login .vue，添加登陆页面布局。

这里是前后端分离模式，会出现一个问题就是跨域，这里就用最简单的方式在后端处理跨域的问题，添加@CrossOrigin
在这里插入图片描述
启动后端项目与前端项目，登陆测试效果。

3.创建注册页面

启动后端项目与前端项目，注册测试效果。
在这里插入图片描述

4.登录状态共享和页面跳转

在登录之后，需要保存登录状态，之后自动跳转到首页。若用户直接进入了首页，就需要自动跳转到登录页面，若用户已登录，进入登录和注册页面时，就需要自动跳转到首页。那么需要把登录状态共享给各个页面，就需要用到Vue Router的全局前置守卫和Vuex。

在src/request/user.js中添加获取用户登录信息接口。

// 获取登录状态及用户信息
export const checkToken = p => get('/user/checkToken', p);

先来使用Vuex把状态保存实现，在src/store下新建文件夹module，并新建文件 src/store/module/user.js。

import { checkToken } from "@/request/user.js"; // 引入获取用户登录信息接口export default {state: {isLogin: false, // 初始时候给一个 isLogin = false 表示用户未登录username: "", // 用户姓名userId: 0,  // 用户iduserInfoObj: {} //  用户信息},mutations: {changeLogin(state, data) {state.isLogin = data;},changeUsername(state, data) {state.username = data;},changeUserId(state, data) {state.userId = data;},changeUserInfoObj(state, data) {state.userInfoObj = Object.assign({}, state.userInfoObj, data);}},actions: {getUserInfo(context) {return checkToken().then((res) => {if (res.success) {context.commit("changeLogin", res.success);context.commit("changeUsername", res.data.username);context.commit("changeUserId", res.data.userId);context.commit("changeUserInfoObj", res.data);} else {context.commit("changeLogin", res.success);}});}}
}

在src/store/index.js中引入刚才创建好的user.js，并将相关数据导出，以便后续使用。

import Vue from "vue";
import Vuex from "vuex";import user from './module/user' // 引入user.jsVue.use(Vuex)export default new Vuex.Store({state: {//},getters: {isLogin: (state) => state.user.isLogin,username: (state) => state.user.username,userId: (state) => state.user.userId,userInfoObj: (state) => state.user.userInfoObj},mutations: {//},actions: {//},modules: {user}
})

后面就可以在各种*.vue文件中使用this.$store.getters.isLogin来获取用户的登录状态了。

接着设置哪些路由需要登录之后才可进入，需要在路由上添加一些信息。在 src/router/index.js中给首页路由添加meta属性，并添加参数requireAuth。

{path: '/',          // 路由路径，即浏览器地址栏中显示的URLname: 'Home',       // 路由名称component: Home,     // 路由所使用的页面meta: {requireAuth: true}

在src/router下新建文件before.js，引入Vue Router和状态保存文件src/store/index.js。

import router from './index.js'
import store from '@/store/index.js'// 路由全局前置守卫
router.beforeEach((to, from, next) => {// 调用接口，判断当前登录状态store.dispatch("getUserInfo").then(() => {if (to.matched.some(m => m.meta.requireAuth)) {if (!store.getters.isLogin) { // 没有登录next({path: '/login',query: { Rurl: to.fullPath }})} else {next()   // 正常跳转到你设置好的页面}} else {next()  // 正常跳转到你设置好的页面}})
})

添加全局前置守卫，可以在触发导航之前进行一些处理，当处理完成后才会执行导航：

先调用接口，判断当前登录状态。
判断将要去的路由是否需要登录，即刚才给路由添加的参数meta.requireAuth 是否为 true，若为true，表示需要登录后才可进入；若没有设置当前参数，或参数值为false，表示无需登录也可进入。
当meta.requireAuth为true时，判断在Vuex中保存的isLogin为true还是false，为true表示已登录，那么执行next()即可正常导航；为false表示未登录，按照之前的说明，将跳转到登录页面。

在src/main.js中引入刚才创建好的before.js。