路由守卫、全局设置axios、携带token到后端、404页面处理

路由守卫、404页面处理

路由守卫

当请求（除登录外）其他路径，对登录状态进行判断，
如果登录成功过，放行，没有登录，跳转到登录页面。
其中对404页面的处理，其路由必须放在所有的路由之后。

index.js中的代码

import Vue from 'vue'
import Router from 'vue-router'
import adminMain from '@/views/adminMain'
import bookList from '@/views/bookList'
import error from '@/views/error'
import adminIndex from '@/views/adminIndex'
import login from '@/views/login'
import cookie from "vue-cookie";

Vue.use(Router);

const routes= [
  {
    path: '/',
    name: 'login',
    component: login,
  },
  {
    path: '/adminMain',
    name: 'adminMain',
    component: adminMain,
    children:[
      {
        path: '/adminIndex',
        name: 'adminIndex',
        component: adminIndex,
      },
      {
        path: '/bookList',
        name: 'bookList',
        component: bookList,
      }
    ]
  },
  {
    path: '*',/*404页面处理*/
    name: 'error',
    component: error,
  }
];

const router = new Router({
  routes
});

export default router

//添加路由守卫
router.beforeEach((to,from,next)=>{

  if (to.path == '/' || to.path == '/login' || to.path == '/registry') {
    //去首页页面,程序继续执行
    next();
  }else {
    //请求其他路径,获取localStorage中的token的值 let 局部变量
    //let token =localStorage.getItem("token");
    let token = cookie.get("token");
    if(token == null || token==''){
      next("/login");//去登陆
    }else {
      next();
    }
  }

});

全局设置axios、携带token到后端

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//导入element-ui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import vueCookie from 'vue-cookie';
Vue.use(vueCookie);

//粒子特效
import VueParticles from 'vue-particles'
Vue.use(VueParticles);

//全局安装axios插件（全局）
var axios = require('axios');
//设置axios访问代理的基础url
axios.defaults.baseURL = 'http://localhost:7000';
axios.defaults.withCredentials = true;//请求时,携带Cookies到后端
// 将axios对象设为vue的原生对象,别名为$axios
Vue.prototype.$axios = axios;

//全局设置
Vue.use(ElementUI);

Vue.config.productionTip = false;

// 添加请求拦截器，在请求头部加token
axios.interceptors.request.use(config =>{

    if(localStorage.getItem('token')){
      config.headers.token = localStorage.getItem('token');
    }
    return config;
  },
  error =>{
    return Promise.reject(error);
  });

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

nginx.conf部分配置,头部添加Token

server {
		listen 7000;
		server_name localhost;
		
		location / {
			
			add_header 'Access-Control-Allow-Origin' '$http_origin';
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS, DELETE, PUT';
			add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Token';
			
		
			#跨域OPTIONS请求，set response header后直接204返回
			if ($request_method = 'OPTIONS') {	
				return 204;
			}
		
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		
		
			proxy_pass http://test;
			proxy_set_header Host $host:$server_port;
		}
	}

注意：由于我的后台使用jwt令牌,所以token是设置在请求的头部