[Vue]Vue-cli脚手架学习(五)——路由守卫，解决eslint报的语法错误、axios设置

最新推荐文章于 2024-08-16 18:42:25 发布

iChangebaobao

最新推荐文章于 2024-08-16 18:42:25 发布

阅读量380

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/iChangebaobao/article/details/105145981

版权

Vue 专栏收录该内容

74 篇文章 1 订阅

订阅专栏

router.js

import Vue from 'vue'
import VueRouter from 'vue-router' 

Vue.use(VueRouter)

const routes = [
  {
    path:'/',redirect:'/login'
  },
  {
    path:'/login',component:()=>import ('@/components/Login.vue')
  },
  {
    path:'/home',component:()=>import ('@/components/Home.vue')
  }
]
const router = new VueRouter({
  routes
})

//挂载一个路由导航守卫
router.beforeEach((to,from,next)=>{
	// to 将要访问的路径
	// from 代表从哪个路径跳转而来
	// next 是一个函数，表示放行
	// next() 放行 /  next('login') 强制跳转

	if(to.path==='/login') return next();
	// 获取token
	const tokenStr=sessionStorage.getItem('token')
	// 无token表示未登录，跳转至登录页
	if (!tokenStr) return next('login')
	// 已登录，放行
	next() 
})  
export default router

.eslintrc.js

‘space-before-function-paren’：0 设置这个值为0，表示禁用这个语法

module.exports={
    root:true,
    env:{
        node:true
    },
    'extends':[
        'plugin:vue/essential',
        '@vue/standard'
    ],
    rules:{
        'no-console':process.env.NODE_ENV==='production'?'error':'off',
        'no-debugger':process.env.NODE_ENV==='production'?'error':'off',
        'space-before-function-paren':0
    },
    parserOptions:{
        parser:'babel-eslint'
    }
}

main.js

import axios from 'axios'
// 设置请求根路径
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
axios.interceptors.request.use(config=>{
  console.log(config)
  //设置请求头
  config.headers.Authorization=sessionStorage.getItem('token')
  return config
})
Vue.prototype.$axios=axios