vue拦截器和vue-cookies

vue 拦截器

假设现在有这么一个需求，页面上有些url需要登录之后才能访问，没有登录访问自动跳转到登录页面。之前项目前后端未分离的时候，直接从session中去匹配，能匹配到则render页面，没匹配成功表示没有登录则redirect到login页面。现在项目统一采用vue + restframework的方式，写vue的感觉就像是在写后台了，哈哈。在vue就能做到这个功能，但是需要后台也做最后一层屏障。因为vue是根据浏览器的cookie是否有token,后台需要判断这个token是不是合法的，至于cookie中没有token就更加走不到后台了。

main.js

在main.js底部加如下代码

router.beforeEach(function (to, from, next) {
  if(to.meta.requireAuth){
    if (store.state.token) {
      next()
    } else {
      next({name: 'login',query: {next_url: to.fullPath}})
    }
  }else{
    next()
  }
});

index.js

在router的index.js里的每个路由加上meta:{requireAuth:true}, meta是固定的，requireAuth是随意取的

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: index,
      meta:{
        requireAuth:true
      }
    },
    {
      path: '/course/:id',
      name: 'course',
      component: course
    }]

上述表述index页面需要登录才能查看

vue-cookies

安装 npm install vue-cookies --save
store目录下的store.js的内容

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex);

export default new Vuex.Store({
  // 组件中通过 this.$store.state.username 调用
  state: {
    token:Cookie.get('token'),
  },
  mutations: {
    saveToken(state, token){
      state.token = token;
      Cookie.set('token', token, '20min')
    },
    clearToken(state){
      Cookie.remove('token');
      state.token = null;
    }
  }
})

在main.js直接import store from './store/store'把store挂载到Vue实例中即可。

axios发送请求

安装npm install axios
在main.js加上两句

import axios from 'axios'
Vue.prototype.$axios = axios;

Login.vue组件

同url不同标识的处理

页面组件的销毁和加载有这么一个特点，假设原url是/detail/1, 这时候在这个页面用router-link得到的/detail/2进行点击，发送浏览器地址栏发生改变，但是页面并没有重新加载，这时候可以使用绑定事件+this.$router.push({})方式解决

切换保持active样式

转载于:https://www.cnblogs.com/longyunfeigu/p/9372013.html