几乎每个vue项目里都会有登录鉴权功能,本文整理一个通用的登录鉴权功能模板。
通常一个vue项目中与登录鉴权功能有关的部分(文件)有:
Login 组件(Login.vue)
store(store.js)
router(router.js)
axios拦截(http-interceptors.js)
Login 组件
登录成功后做本地存储和store存储,并进行跳转。
Login.vue关键代码:
async handleLogin(e) {
e.preventDefault();
//获取登录表单值
let parmas = {
username: this.model.username,
passwold: this.model.passwold
};
//发送登录异步请求,获取结果集
const res = await this.$http.get("/api/login", parmas);
const { code, token, massage } = res.data;
//code=='0'表示登录成功,进行本地存储和store存储 并进行跳转。
//else 弹出错误提示
if (code == "0") {
this.$store.commit("setToken", res.data.token);
localStora