이 글의 내용은 Vue 로그인 등록(코드 분석)의 구현 방법에 관한 것입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.
Vue 로그인 등록 및 로그인 상태 유지에 대해서는 Vue 플레이어를 위한 유일한 방법이 있지만 일부는 너무 복잡해서 초보자들이 혼란스러워할 수도 있습니다. 내가 프로젝트를 작성할 때 사용하는 방법은 이해하기 어렵지 않습니다.
프로젝트에는 홈페이지, 개인센터 등 로그인을 해야 입장 가능한 경로가 있습니다.
로그인 등 로그인 없이도 입장 가능한 경로가 있습니다. 페이지, 등록 페이지, 비밀번호 분실 등
그러면 해당 경로에 로그인이 필요한지 어떻게 확인하나요? 라우팅 JS에서 소란을 피울 필요가 있습니다
예를 들어 등록 페이지에 로그인하면 로그인하지 않고도 들어갈 수 있으며 isLogin 플래그를 에 설정합니다. Meta to false
{ //登录 path: '/login', component: login, meta: { isLogin: false } }, { //注册 path: '/register', component: register, meta: { isLogin: false } },
홈페이지에서는 로그인을 해야 입장이 가능하므로, 메타의 isLogin 플래그를 true
{ //首页 path: '/home', component: home, meta: { isLogin: true }, }
로 설정하여 로그인이 필요한지 구분합니다. 각 경로.
우리는 axios를 사용하여 백그라운드에 대한 로그인 요청을 시작합니다
this.$axios.post("/xxx/login", {user:name,password:pwd}) .then(data => { //登录失败,先不讨论 if (data.data.status != 200) { //iViewUi的友好提示 this.$Message.error(data.data.message); //登录成功 } else { //设置Vuex登录标志为true,默认userLogin为false this.$store.dispatch("userLogin", true); //Vuex在用户刷新的时候userLogin会回到默认值false,所以我们需要用到HTML5储存 //我们设置一个名为Flag,值为isLogin的字段,作用是如果Flag有值且为isLogin的时候,证明用户已经登录了。 localStorage.setItem("Flag", "isLogin"); //iViewUi的友好提示 this.$Message.success(data.data.message); //登录成功后跳转到指定页面 this.$router.push("/home"); } });
Vuex에서 이렇게 썼습니다(프로젝트에 Vuex가 필요하지 않으면 그냥 HTML5 저장소를 직접 사용):
export const store = new Vuex.Store({ // 设置属性 state: { isLogin: false, }, // 获取属性的状态 getters: { //获取登录状态 isLogin: state => state.isLogin, }, // 设置属性状态 mutations: { //保存登录状态 userStatus(state, flag) { state.isLogin = flag }, }, // 应用mutations actions: { //获取登录状态 setUser({commit}, flag) { commit("userStatus", flag) }, } })
router.beforeEach((to, from, next) => { //获取用户登录成功后储存的登录标志 let getFlag = localStorage.getItem("Flag"); //如果登录标志存在且为isLogin,即用户已登录 if(getFlag === "isLogin"){ //设置vuex登录状态为已登录 store.state.isLogin = true next() //如果已登录,还想想进入登录注册界面,则定向回首页 if (!to.meta.isLogin) { //iViewUi友好提示 iView.Message.error('请先退出登录') next({ path: '/home' }) } //如果登录标志不存在,即未登录 }else{ //用户想进入需要登录的页面,则定向回登录界面 if(to.meta.isLogin){ next({ path: '/login', }) //iViewUi友好提示 iView.Message.info('请先登录') //用户进入无需登录的界面,则跳转继续 }else{ next() } } }); router.afterEach(route => { window.scroll(0, 0); });
이렇게 하면 사용자가 브라우저를 닫거나 다음에 다시 웹사이트에 로그인하면 Vue의 로그인 등록이 완료됩니다. 사용자는 수동으로 로그아웃할 때까지 로그인 상태를 계속 유지할 수 있습니다.
팁: 사용자는 로그아웃하려면 localStorage.removeItem("Flag")만 필요합니다.
관련 권장 사항:
Laravel은 사용자 등록 및 로그인을 구현하고, laravel은 사용자 등록_PHP 튜토리얼을 구현합니다
JS는 드롭다운을 구현합니다. 메뉴 로그인 등록 팝업창
위 내용은 Vue 로그인 등록 구현 방법(코드 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!