如何设置Vue路由守卫和页面登录权限控制？

本文共计428个文字，预计阅读时间需要2分钟。

在登录页面存储登录数据并在登录成功时保存状态：

首先在登录页面保存登录数据：javascriptsessionStorage.setItem('loginData', '登录数据');sessionStorage.setItem('loginStatus', 'success');

添加路由守卫方法：javascriptconst router=new VueRouter({ // ... 其他配置});

①先在我们的登录页面存储一个登录数据

// 登录成功时保存一个登录状态； sessionStorage.setItem("flag", 1);

② 添加路由守卫

方法一： 直接在路由中添加

const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { // ... })

方法二：当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { }）方法。