前置路由守卫代码写在main.js中代码如下:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant'
import 'vant/lib/index.css'
import 'lib-flexible'
import axios from "axios";
import store from "@/store";
Vue.prototype.$http = axios;
Vue.use(Vant);
Vue.config.productionTip = false;
//路由守卫代码
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('Token'); // 获取token
if (token) { // 如果token不为null 就放行,如果为空 就不放行
next();
} else {
if (to.path === '/login') { // 在为空的情况下,我们路由跳转的是'/login' 就放行。'/login'代表我们登录页
next()
} else { // 在为空的情况下,访问的不是'/login', 就直接跳转到'/login'
next({
path: '/login'
})
}
}
});
new Vue({
router,
render: h => h(App),
store
}).$mount('#app')