Thinkphp+Vue前后端分离学习笔记（6）

前端部分内容比较多，涉及到7个页面，4个js，一点一点来吧。

1. src/main.js

这是最关键的js文件，里面导入所有需要用到的东西，然后添加了axios请求前后的拦截处理。

注意这两个拦截处理需要放到new Vue(...).$mount("#app");的前面，否则不生效。

关于axios也可以在main.js里全局注册为vue的prototype，这样在其他页面就不需要再次导入了。

Vue.prototype.$axios = axios

使用的时候就可以用this.$axios 调用。

import Vue from "vue";
import App from "./App.vue"; //导入页面框架
import router from "./router"; //导入Router
import "./plugins/element.js"; //导入element-ui
import store from "./store"; //导入Vuex
import axios from "axios"; //导入axios进行异步请求
import cookie from "vue-cookies"; //导入cookie组件，下面要读取cookie内容

Vue.config.productionTip = false;

// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (
      config.url === "/api/index/login" ||
      config.url === "/api/index/get_captcha"
    ) {
      //login和get_captcha不处理，直接请求
    } else {
      let token = cookie.get("token");
      let uname = cookie.get("name");
      let ltime = cookie.get("ltime");
      if (token) {
        config.headers.token = token;
      }
      if (uname) {
        config.headers.uname = uname;
      }
      if (ltime) {
        config.headers.ltime = ltime;
      }
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//异步请求后，判断token是否过期
axios.interceptors.response.use(
  response => {
    return response; //返回成功（状态码200），直接传给页面
  },
  error => {
    if (error.response) {
      switch (
        error.response.status //返回错误状态码
      ) {
        case 401: //401表示验证失败，清除cookie内容，跳转登录页
          cookie.set("token", "", 0); //最后这个参数0表示随浏览器关闭失效，否则默认时1天
          cookie.set("name", "", 0);
          cookie.set("ltime", "", 0);
          this.$router.push("/login");
      }
    }
  }
);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

2. src/store/index.js Vuex存储管理js

关于存储，可以使用localStorage来存储，我这里用的是cookie，主要想利用的是cookie随浏览器关闭而结束的特性。如果希望长时间保存登录信息可以使用localStorage或为cookie设置过期时间。

import Vue from "vue";
import Vuex from "vuex";
import cookie from "vue-cookies"; //导入cookie组件，如果使用localStorage则不需要这句

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    //下面注释掉了localStorage相关语句，如果要用localStorage则取消localStorage的注释，并注释掉cookie的部分，其他页面我就只保留cookie的部分，若使用localStorage需要自行修改
    /*
    Authorization: localStorage.getItem("Authorization") ? localStorage.getItem("Authorization") : "",
    Uname: localStorage.getItem("Uname") ? localStorage.getItem("Uname") : "",
    Ltime: localStorage.getItem("Ltime") ? localStorage.getItem("Ltime") : ""
    */
    Authorization: cookie.get("token"),
    Uname: cookie.get("name"),
    Ltime: cookie.get("ltime")
  },
  mutations: {
    // 修改token，并将token存入localStorage或cookie
    changeLogin(state, user) {
      state.Authorization = user.Authorization;
      state.Uname = user.Uname;
      /*
      localStorage.setItem("Authorization", user.Authorization);
      localStorage.setItem("Uname", user.Uname);
      localStorage.setItem("Ltime", user.Ltime);
      */
      cookie.set("token", user.Authorization, 0);
      cookie.set("name", user.Uname, 0);
      cookie.set("ltime", user.Ltime, 0);
    }
  },
  actions: {},
  modules: {}
});

3. src/router/index.js 路由js

import Vue from "vue";
import VueRouter from "vue-router"; //导入Router
import Home from "../views/Home.vue"; //导入src/views下面的几个页面
import Register from "../views/Register.vue";
import Login from "../views/Login.vue";
import Logout from "../views/Logout.vue";
import About from "../views/About.vue";
import Err from "../views/Err.vue";
import cookie from "vue-cookies"; //导入cookie

Vue.use(VueRouter);

//定义每个页面的路由
const routes = [
  {
    path: "/",
    redirect: "/home" //跳到/home
  },
  {
    path: "/home",
    name: "Home",
    meta: {
      requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
    },
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  {
    path: "/register",
    name: "Register",
    component: Register
  },
  {
    path: "/login",
    name: "Login",
    component: Login
  },
  {
    path: "/logout",
    name: "Logout",
    meta: {
      requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
    },
    component: Logout
  },
  { path: "*", name: "Err", component: Err } //其他未定义的页面都跳到错误页面
];

const router = new VueRouter({
  mode: "history", //使用history模式
  base: process.env.BASE_URL,
  routes
});

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    //need login
    //let token = localStorage.getItem("Authorization");
    let token = cookie.get("token");
    //console.log("我是浏览器本地缓存的token: " + token);
    if (token === null || token === "" || token === "undefined") {
      //console.log("need login");
      next("/login"); //cookie里没有找到有效的token就跳转到登录
    } else {
      //console.log("already login");
      next();
    }
  } else {
    //console.log("no need login");
    next();
  }
});

export default router;

4. vue.config.js

如果是本机调试不需要设置host，如果是局域网调试则需要，并改成正确的服务器ip。否则会有报错：[WDS] Disconnected

// vue.config.js
module.exports = {
  //定义调试服务器，也就是npm run serve会用到，不影响npm run build
  devServer: {
    open: true,
    // host: "192.168.0.100",
    port: 8080,
    https: false,
    hotOnly: false,
    //配置axios的代理，解决调试时的跨域问题
    proxy: {
      "/api": {
        target: "http://localhost/api", // 外部引入的url,连接的后端的服务器
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};