前端路由加载
1、静态路由，前端控制的路由，不涉及到后端，其中有登录路由、跟路由、异常页路由。在main.ts中加载
// main.ts
setupRouter(app);
// 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);
}
2、动态菜单路由，从服务端拿到路由数据，转换为菜单路由，这些路由经过了权限的过滤，是当前用户所在角色拥有的路由
const routes = await asyncRouteStore.generateRoutes(userInfo);
// store/modules/asyncRoute.ts
async generateRoutes(data) {
// ...
try {
accessedRouters = await generatorDynamicRouter();
} catch (error) {}
// ...
}
// 动态生成菜单 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，来动态切换要显示的内容，是登录组件，还是注册组件
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和内存中
// 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);
然后在处理完成以后，跳转到主页面
// src/views/login/login/form.vue
router.replace('/');
以后每次在路由切换的时候，都会通过路由守卫进行判断token，如果没有，跳转登录页
// src/router/router-guards.ts
const token = storage.get(ACCESS_TOKEN);
if (!token) {
// 未登录处理
}
补充一些后端的注册登录逻辑
注册逻辑在site.go文件中
internal/logic/admin/site.go
// Register 账号注册
func (s *sAdminSite) Register(ctx context.Context, in *adminin.RegisterInp) (err error) {
// ...
// 提交注册信息
return g.DB().Transaction(ctx, func(ctx context.Context, tx gdb.TX) (err error) {
id, err := dao.AdminMember.Ctx(ctx).Data(data).OmitEmptyData().InsertAndGetId()
if err != nil {
err = gerror.Wrap(err, consts.ErrorORM)
return
}
// 更新岗位
if err = service.AdminMemberPost().UpdatePostIds(ctx, id, config.PostIds); err != nil {
err = gerror.Wrap(err, consts.ErrorORM)
}
return
})
}
注册函数中，会查看你有没有使用邀请码，有的话查出来，给你设置pid，就算是你的上级用户了；
会检测有没有配置默认的角色，部门等信息；
验证账号的唯一性；
验证短信验证码；
这些都通过之后，给你的账号生成一个salt，你自己的邀请码，然后使用salt和你自己的密码生成一个加密后的密码，存储到数据库中。
登录逻辑也在该文件中
// AccountLogin 账号登录
func (s *sAdminSite) AccountLogin(ctx context.Context, in *adminin.AccountLoginInp) (res *adminin.LoginModel, err error) {
// ...
if err = simple.CheckPassword(in.Password, mb.Salt, mb.PasswordHash); err != nil {
return
}
if mb.Status != consts.StatusEnabled {
err = gerror.New("账号已被禁用")
return
}
res, err = s.handleLogin(ctx, mb)
return
}
验证账户是否存在，用户名密码是否正确，注意这里验证的时候，要用到注册时生成的salt，作者这里用的是base64 + aes + md5，使用salt，使得密码更为安全，即使同样的密码，存储到数据库也是不一样的。
验证通过之后，查询用户信息，然后使用jwt结合用户信息，生成token和过期时间，最后返回给用户。jwt中token信息是base64的结果，是可以解码查看的，注意不要放与密钥相关的重要信息。
了解一个项目，就像了解一棵树一样，先了解主干，在看枝叶。具体其他函数和变量，再慢慢细究。
