1.一般登陆都会将登陆信息放入cookie中，vue中需要借助 vue-cookies.
// main.js 文件
const $cookies = require('vue-cookies')
Vue.use($cookies)
2.在登录的时候将登录信息放入cookie中
// 登陆组件，template部分省略
this.$axios({
method: "post",
url: login,
data: {
userName: 'root',
password: 'root'
}
})
.then(({data}) => {
if (data.message === "success") {
this.$cookies.set("status", "logined", 30 * 60); // 设置cookie中存放的生命周期
let redirect = decodeURIComponent(
this.$route.query.redirect || "/home"
);
this.$router.push({path: redirect});
this.$message({
title: '提示',
type: 'success',
message: '登录成功！'
});
} else {
this.$message({
title: '提示',
type: 'info',
message: '用户名或密码错误！请重新登录！'
});
}
});
3.在route.js文件中注册全局前置守卫
// 定义路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (router.app.$cookies.get("status") !== "logined") {
next({
path: '/login',
query: { redirect: to.fullPath } // 把要跳转的地址作为参数传到下一步
})
} else {
next()
}
} else {
if (to.query && to.query.redirect) {
if (router.app.$cookies.get("status") === "logined") {
next({path: to.query.redirect})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
}
})
上面就可以设置当cookie中的信息过期之后，再次请求新的路由，会直接跳转到登录页面。
