004-从零搭建微服务-认证中心（四）

写在最前

如果这个项目让你有所收获，记得 Star 关注哦，这对我是非常不错的鼓励与支持。

源码地址：https://gitee.com/csps/mingyue

文档地址：https://gitee.com/csps/mingyue/wikis

搭建前端框架

感谢开源项目【vue-next-admin】

本人后端一枚，前端不是很懂，前端有什么写的不好的地方，请积极指出，我虚心受教，积极改正！

运行项目

参考项目 README.md 【使用说明】

登录与登出

访问：http://localhost:8888/#/login?redirect=/home&params={}

登录前缓存数据

登出

查看缓存

oauth2 相关缓存已经删除了

前端相关代码

const onSignIn = async () => {state.loading.signIn = true;useLoginApi().signIn(state.ruleForm).then(async res => {// 存储 token 到浏览器缓存Session.set('token', res.data.access_token);// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）Cookies.set('userName', state.ruleForm.username);if (!themeConfig.value.isRequestRoutes) {// 前端控制路由，2、请注意执行顺序const isNoPower = await initFrontEndControlRoutes();signInSuccess(isNoPower);} else {console.log(2);// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"const isNoPower = await initBackEndControlRoutes();// 执行完 initBackEndControlRoutes，再执行 signInSuccesssignInSuccess(isNoPower);}});};

打开 src/api/login/index.ts，查看 signIn() 登录函数

signIn: (data: object) => {console.log(data);let client_id = 1001;let grant_type = 'password';let client_secret = 'aaaa-bbbb-cccc-dddd-eeee';// TODO 规范入参类型let username = data.username;let password = data.password;return request({url: '/api/oauth2/token',method: 'post',params: {grant_type, client_id, client_secret, username, password}});
}

用户信息

src/stores/userInfo.ts 模拟用户信息

async getApiUserInfo() {...
}

登出

打开 src/layout/navBars/topBar/user.vue，查看 onHandleCommandClick() 登录函数

const onHandleCommandClick = (path: string) => {if (path === 'logOut') {ElMessageBox({...}, 700);} else {done();}},}).then(async () => {// 调用退出登录接口useLoginApi().signOut().then(res => {// 清除缓存/token等Session.clear();// 使用 reload 时，不需要调用 resetRoute() 重置路由window.location.reload();})}).catch(() => {});}
};