vue--(Router、vueX、axios)

182 阅读1分钟

vueX

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
  state: { //存放状态
    nickname:'Simba',
    age:20,
    gender:'男'
  },
  mutations: {},
  actions: {},
  modules: {}
})
export default store

Router

import router from './routers'
           
router.beforeEach((to, from, next) => { 
})//进入页面的限制,路由拦截  进入之前触发
-   to:进入到哪个路由去
-   from:从哪个路由离开
-   next:路由的控制参数,常用的有next(true)和next(false)

首先判断进入的是否是login页面?然后再判断是否已经登陆?\
已经登陆了就进入你要跳转的页面,没登录就进入login页面

router.afterEach(() => {
}) //进入之后触发**
export default router

axios

import axios from 'axios'// 创建axios实例
const service = axios.create({  
    baseURL: address.th03, 
    timeout: 50000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(  
    config => {    
        var token = getToken("token")    
        if (token) {      
            config.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带自定义token 请根据实际情况自行修改    
        }       
        config.headers['Content-Type'] = 'application/json' 
        return config 
    }
)

export default service 

接口调用加token

$.ajax({
    type: 'get',
    url: address.defult + '/selectByUserId',
    data:{
        id:response.data.data.user.id
    },
    dataType:'json',
    contentType:'application/json',
    headers:{
        'Authorization':'Bearer '+getToken("token"),
    },
    success:function(data){
        if(data.code === 0) {
            var menuList = []
            data.data.forEach(item => {
                menuList.push(item.component)
            })
            console.log(menuList)
            localStorage.setItem('MENU_LIST', JSON.stringify(menuList))
        }
    },
    error: function(data) {
    }
})