需求: 如果不登录就不能随便操作路由
比如说 http://192.168.0.100 打开登陆页面
输入http://192.168.0.100 /#/home 跳转到home页面
所以必须控制路由,才能完成输入登陆页面成功跳转到home页面,而不是直接写一个home页面的链接就跳过来了
配置基本步骤:
1.需要在登陆页面配置
当登陆成功后
if(res.data.success) {
sessionStorage.setItem('username',res.data.username) //需要后端返回 等同token
this.$router.push('/home' ) // 跳转
}
2.需要在路由的indes.js配置
代码如下:
// 设置路由的前置守卫(路由跳转之前)
router.beforeEach((to, from, next) => {
if (to.name == 'Login') {
next();
} else {
// 判断sesstion里有没有username
const username = sessionStorage.getItem('username');
if (username) {
next();
} else {
next({path: '/'})
}
}
})
3.配置退出按钮
sessionStorage.clear(); // 删除sesstion数据
this.$router.push({ path: "/" }); //跳转到登陆页面
在这里需要说明 sesstionStorage的生命周期,当关闭网页就消失了,
此处用的是username 如果是token 需要再axios的拦截器中添加这一行代码,其他等同
// 在axios拦截器中添加 一般token是随着请求头
if (config.url !== '/') {
const token = sessionStorage.getItem('token');
// 设置请求头
config.headers.Authorization = token;
}
还有的是利用vuex登陆的这个慢慢研究