这里主要用到的是路由拦截，在路由表里添加一个字段：requireAuth，用于判断该路由的访问是否需要登录；定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断
钩子函数：
每个钩子方法接收三个参数：
* to: Route: 即将要进入的目标 路由对象
* from: Route: 当前导航正要离开的路由
* next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
* next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
* next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
* next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
const Index = r => require(['@/pages/index'], r)
const Task = r => require(['@/pages/task'], r)
const Result = r => require(['@/pages/result'], r)
const Analysis = r => require(['@/components/result/analysis'], r)
const FeatureShow = r => require(['@/components/result/featureShow'], r)
const Spread = r => require(['@/components/result/spread'], r)
const Pool = r => require(['@/pages/pool'], r)
const PoolDetail = r => require(['@/pages/poolDetail'], r)
const Login = r => require(['@/pages/login'], r);
const Authorize = r => require(['@/pages/privilege/authorize'], r)
const Group = r => require(['@/pages/privilege/group'], r)
const router = new Router({
routes: [
{path: '/', redirect: 'task'},
{
name: 'index',
path: '/index',
component: Index
},
{
name: 'login',
path: '/login',
component: Login
},
{
name: 'taskQ',
path: '/task/:id',
component: Task
},
{
name: 'task',
path: '/task',
component: Task
},
{ name: 'result',
path: '/task/:id/result',
component: Result,
redirect:'/task/:id/result/analysis',
props: {},
children: [
{
name: 'analysis',
path: '/task/:id/result/analysis',
component: Analysis,
props: {}
},
{
name: 'feature',
path: '/task/:id/result/feature',
component: FeatureShow,
props: {}
},
// {
// name: 'spread',
// path: '/result/spread',
// component: Spread,
// props: {}
// },
]
},
{
name: 'pool',
path: '/pool',
component: Pool
},
{
name: 'poolDetail',
path: '/pool/:poolId',
component: PoolDetail
},
{
name: 'Authorize',
path: '/authorize',
component: Authorize
},
{
name: 'Group',
path: '/group',
component: Group
},
{
path: '*',
redirect: 'task'
}
]
});
router.beforeEach((to, from, next) => {
// console.log(`router.beforeEach(to: `, to, `from: `, from, `next: `, next);
// console.log(to.name === 'login',store.getters.user_name)
if (to.name === 'login' || store.getters.user_name) {
// console.log(store.getters)
return next();
} else if (to.name && (store.getters.user_name == '' || store.getters.user_name === undefined)) {
let url = Qs.parse(window.location.href.split('?')[1]);//
if(url.tk === undefined){
return next(
router.replace({name: 'login'})
);
}else {
let formData = new FormData();
formData.append("tk", url.tk)
let loading = Loading.service({
target: '.loading-target',
lock: true,
text: '正在获取数据。。。',
background: 'rgba(250,235,215,0.5)'
});
return API.getAuth(formData).then(res => {
axios.defaults.headers.common['x-token'] = res.token;
store.commit('SAVE_USER_INFO', {
userName: res.umCode,
token: res.token,
role: res.umType
});
Vue.nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loading.close();
console.log('_tag, ',typeof _tag)
let num = 0;
tagLoaded();
function tagLoaded() {
num++;
if(typeof _tag === 'undefined') {
if(num > 30) return;
setTimeout(function() {
// console.log('tagLoaded')
tagLoaded()
}, 1000)
}else {
console.log('tagLoaded suc')
_tag.trackEvent('登录成功');
}
}
});
return next(
router.replace({name: 'task'})
);
}, err => {
// debugger
Vue.nextTick(() => {
loading.close();
});
Notification.error({
title:'警告',
message:err.message,
duration: 2000,
onClose:function(){
return next(
router.replace({name: 'login'})
);
}
})
});
}
} else {
return next(
router.replace({name: 'login'})
);
}
});
export default router
https://blog.csdn.net/qq_30632003/article/details/79447904参考