该导什么包?在下也不清楚。我只是代码的搬运工;
拦截器相当于在你的门口放一只狗。
初始化狗子函数 是store下的index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {
username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username
}
},
mutations: {
login (state, user) {
state.user = user
window.localStorage.setItem('user', JSON.stringify(user))
}
}
})
在main.js文件里面,要开启路由的前置判断函数,并在new Vue中引用
就是在你的大门前面放只狗,你总不能放门后面吧。
router.beforeEach((to, from, next) =>
{
if (to.meta.requireAuth) {
console.log("进入")
if (store.state.user.username!= "") {
console.log(store.state.user)
next()
})
} else {
console.log("弹出")
next({
path: 'login',
query: {redirect: to.fullPath}
})
}
} else {
next()
}
}
)
new Vue({
el: '#app',
render: h => h(App),
router,
// 注意这里
store,
components: { App },
template: '<App/>'
})
最后你要站在门口,告诉狗子,什么人该咬,什么人不咬。
这个是写在router里面的
meta: {
requireAuth: true // 是否需要拦截
}
如
{
path: '/home',
name: 'Home',
component: Home,
meta: {
requireAuth: true // 是否需要拦截
}
},