-
配置路由表：在配置路由表时，对于需要进行登录鉴权的路由，可以添加一个自定义的 meta 属性，比如
meta: { requiresAuth: true }，表示这个路由需要登录鉴权。 -
创建全局路由守卫：使用 Vue Router 提供的
beforeEach钩子函数，在路由跳转之前进行鉴权处理。 -
获取用户登录状态：可以通过访问后端 API，或者从本地存储（如 localStorage、Cookie 等）中获取用户的登录状态。
-
判断路由是否需要鉴权：检查即将跳转的目标路由的 meta 属性，如果
requiresAuth为true，则表示需要进行鉴权。 -
登录鉴权处理：如果目标路由需要鉴权，且用户已登录，则正常跳转；如果目标路由需要鉴权，但用户未登录，可以跳转到登录页面，并将目标路由的信息作为参数附加在登录页面的 URL 上，方便用户登录后跳转回目标页面；如果目标路由不需要鉴权，则正常跳转。
-
登录后跳转：用户登录成功后，可以从 URL 参数中获取目标路由信息，然后跳转到目标路由；如果没有目标路由信息，则跳转到默认页面，比如首页。
在Vue.js中，可以使用全局前置守卫（beforeEach）实现登录鉴权。以下是使用Vue Router实现全局路由守卫的示例：
- 首先，在路由配置文件（例如
router/index.js）中定义需要登录鉴权的路由。可以通过为需要鉴权的路由添加meta属性，设置requiresAuth为true来实现：
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Dashboard from '@/components/Dashboard';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true }, // 需要登录鉴权的路由
},
],
});
- 接下来，在
main.js文件中定义全局前置守卫（beforeEach）：
import Vue from 'vue';
import App from './App';
import router from './router';
// 模拟一个简单的登录状态
const isAuthenticated = false;
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 判断要访问的路由是否需要登录鉴权
if (to.matched.some(record => record.meta.requiresAuth)) {
// 验证用户是否已登录
if (!isAuthenticated) {
// 如果未登录，则重定向到登录页面
next({ name: 'Home' });
} else {
// 如果已登录，允许访问目标页面
next();
}
} else {
// 对于不需要登录鉴权的路由，直接放行
next();
}
});
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
在这个例子中，当用户尝试访问需要登录鉴权的/dashboard路由时，全局前置守卫会检查用户的登录状态。如果用户未登录，将重定向到登录页面（在这里是Home组件）。如果用户已登录，将允许访问目标页面。
