用户未登录重定向到登录界面_前端项目024 详解用户登录（上）

1. 登录流程分析

2 路由和权限校验

我们在登陆完成之后，删除Token，然后刷新。此时会退回登陆页面

2.1 路由处理实例

创建组件

创建组件 src/views/book/create.vue

配置路由

修改 src/router/index.js 的 asyncRoutes：

export const asyncRoutes = [
  {
    path: '/book',
    component: Layout,
    redirect: '/book/create',
    children: [
      {
        path: '/book/create',
        component: () => import('@/views/book/create'),
        name: 'book',
        meta: { title: '添加图书', icon: 'edit', roles: ['admin'] }
      }
    ]
  },
  // ...
]

测试

• 使用 editor 登录平台，无法看到"添加图书"功能
• 使用 admin 登录平台，可以看到"添加图书"功能

2.2 预备知识

2.2.1 路由和权限校验

路由逻辑图

路由处理逻辑图如下：