HotGo--登录处理

前端路由加载

1、静态路由，前端控制的路由，不涉及到后端，其中有登录路由、跟路由、异常页路由。在main.ts中加载

ts 复制代码

// main.ts
setupRouter(app);

ts 复制代码

// router/index.ts

//普通路由 无需验证权限
export const constantRouter: any[] = [LoginRoute, RootRoute, RedirectRoute];

const router = createRouter({
  history: createWebHashHistory(''),
  routes: constantRouter,
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

export function setupRouter(app: App) {
  app.use(router);
  // 创建路由守卫
  createRouterGuards(router);
}

/web/src/router/index.ts#L54

2、动态菜单路由，从服务端拿到路由数据，转换为菜单路由，这些路由经过了权限的过滤，是当前用户所在角色拥有的路由

const routes = await asyncRouteStore.generateRoutes(userInfo);

ts 复制代码

// store/modules/asyncRoute.ts
async generateRoutes(data) {
    // ...
    try {
        accessedRouters = await generatorDynamicRouter();
    } catch (error) {}
    // ...
}

ts 复制代码

// 动态生成菜单 web/src/router/generator-routers.ts
export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
  return new Promise((resolve, reject) => {
    adminMenus()
      .then((result) => {
        const routeList = routerGenerator(result.list);
        asyncImportRoute(routeList);
        resolve(routeList);
      })
      .catch((err) => {
        reject(err);
      });
  });
};

/web/src/router/generator-routers.ts#L56

登录页面

从 router/index.ts 中可以看到，登录页面在 @/views/login/index.vue

通过vue的Component，来动态切换要显示的内容，是登录组件，还是注册组件

ts 复制代码

import LoginFrom from './login/index.vue';
import RegisterFrom from './register/index.vue';
  
// src/views/login/index.vue
// { key: 'register', label: '注册账号', component: RegisterFrom }
const activeModule = ref<LoginModule>({
    key: 'login',
    label: '账号登录',
    component: LoginFrom,
 });

登录请求与跳转，随着登录按钮的点击事件handleLogin，进入了登录请求，拿到数据，缓存到localStorage和内存中

ts 复制代码

// src/store/modules/user.ts
const ex = 30 * 24 * 60 * 60 * 1000;
storage.set(ACCESS_TOKEN, data.token, ex);
storage.set(CURRENT_USER, data, ex);
storage.set(IS_LOCKSCREEN, false);
this.setToken(data.token);
this.setUserInfo(data);

然后在处理完成以后，跳转到主页面

ts 复制代码

// src/views/login/login/form.vue
router.replace('/');

以后每次在路由切换的时候，都会通过路由守卫进行判断token，如果没有，跳转登录页

ts 复制代码

// src/router/router-guards.ts
const token = storage.get(ACCESS_TOKEN);
if (!token) {
   // 未登录处理
}

了解一个项目，就像了解一棵树一样，先了解主干，在看枝叶。具体其他函数和变量，再慢慢细究。