vue自动登录 不要登陆页打开直接登录
项目需求要求,打开网页直接登录,不要出现登录页面。思考一下,做了几方面的修改。1、vuex actions 登录方法....actions: {// 自动登录autoLogin ({commit}) {return new Promise((resolve, reject) => {doLogin({username: 'admin',password: md5('adm
·
项目需求要求,打开网页直接登录,不要出现登录页面。思考一下,做了几方面的修改。
1、vuex actions 登录方法
....
actions: {
// 自动登录
autoLogin ({commit}) {
return new Promise((resolve, reject) => {
doLogin({
username: 'admin',
password: md5('admin123') // 因为自动登录 肯定写死用户名密码
}).then(res => {
if (res.data.data != null) {
let {token, roles, groupNode, user} = res.data.data;
commit('setToken',token);
commit('setRoles',roles);
commit('setUser',user);
commit('setProject',groupNode.key);
commit('setLoginInfo',res);
}
let {code} = res.data;
commit('setCode',code);
// 得到响应之后,code为 0 是成功登录
resolve(code);
}).catch(error => {
reject(error)
})
})
}
}
2、router 路由的更改
import store from '../store'
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = "xxxxx" + to.meta.title;
}
let token = window.sessionStorage.getItem('token');
let code = window.sessionStorage.getItem('logincode');
// 如果没有token 并且没有任何响应 就要去action中自动登录
if (!token && !code) {
store.dispatch('autoLogin').then(res => {
console.log('res-login', res);
if (res == 0) {
next();
} else {
next("/login-error");
}
})
} else { // 其他情况可以放行
next();
}
// 有登录页面的时候
// if (to.path === "/login") {
// next();
// } else {
// if (!token) {
// next("/login");
// } else {
// next();
// }
// }
});
3、万一登录失败怎么办?
可以在上边的路由中看到,如果响应失败(code不等0)的情况,路由自行跳转到 'login-error';
可以将登录失败的原因的显示在页面上,可以让开发人员查看信息。
更多推荐
已为社区贡献15条内容
所有评论(0)