admin 管理员组

文章数量: 1086019

VUE实现登录和登出

新增保存token的帮助类


// 跨域认证信息 header 名
const authorizationKey = 'Authorization'//获取认证信息
function getAuthorization(token) {return sessionStorage.getItem(authorizationKey);
}
//设置认证信息
function setAuthorization(token) {sessionStorage.setItem(authorizationKey, token);
}
//清除认证信息
function removeAuthorization(token) {sessionStorage.removeItem(authorizationKey);
}export {setAuthorization, removeAuthorization, getAuthorization
}

登录后把服务器的token存在本地

//设置登录信息

 setAuthorization("1111");

退出时候，调用清空Token

removeAuthorization();

路由跳转的时候判断有没有token，没有就去登录页面


//路由前置守卫
router.beforeEach((to, from, next) => {if (to.meta.needLogin == false) {//不需要登录next();return;}//没有token直接去登录页面if(getAuthorization()==null){next({path: "/login"});return;}next();
});

路由里面设置哪些页面不需要登录

{path: "/login",name: 'login',component: () => import('@/common/login/index'),meta: {//不需要登录needLogin: false}},

当然这这是前端的验证，后续ajax请求服务的时候，都会把这个token带到后台，通过ajax返回的结果再去判断是否需要退出登录和页面权限判断

本文标签： VUE实现登录和登出

版权声明：本文标题：VUE实现登录和登出 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686731838a30502.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。