如何配置Vue路由守卫实现两种页面登录权限控制？

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

在登录页面存储登录数据并在登录成功时保存登录状态，可以直接使用以下代码：

javascript// 在登录页面存储登录数据sessionStorage.setItem('loginData', JSON.stringify(loginData));

// 登录成功时保存登录状态sessionStorage.setItem('flag', 1);

// 添加路由守卫方法一：const 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) => { }）方法。