vuex+localStorageログイン

1.vuex npm i-s vuexをインストール(axiosがインストールされていない場合、npm i-s axios).新しいstoreフォルダ、新しいindex.jsファイル(またはmain.jsで直接構成)

import Vuex from 'vuex' //      
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
	modules: {
	    user
	  }
})

3.storeフォルダでmodulesフォルダを新規作成し、userを新規作成します.jsファイル

import { login, getInfo } from "@/api/user"
import cookies from "@/utils/cookies"
import router from "@/router/index"

//                ，         ，    localstorage       
let defaultName='   '
try{
    if(localStorage.setItem('user_name', name)){
        defaultName=localStorage.setItem('user_name', name)
    }
}catch (e) {

}

export default {
    namespaced: true,
    state: {
        id:0 || localStorage.getItem('user_id'),
        name: "" || localStorage.getItem('user_name'),
    },
    getters: {
        id:state=>state.id,
        name: state => state.name,
    },
    mutations: {
        updateId (state, id) {
            state.id = id
            //       ID   localStorage ，      ，  vuex    ，         （     ）   
            localStorage.setItem('user_id', id)
        },
        updateName (state, name) {
            state.name = name
            console.log("mutation:"+state.name)
            //            localStorage ，      ，  vuex    ，         （     ） F  
            localStorage.setItem('user_name', name)
        }
    }
    },
}

3.とmain.js同級はpermissionを新規作成します.js,主にログイン権限の問題を判断する

import router from "@/router/index"
import cookies from "./utils/cookies";

router.beforeEach((to, from, next) => {
    if (to.path === "/login") return next() //       .    
    const JSESSIONID=cookies.get('JSESSIONID')
    console.log("JSESSIONID:",JSESSIONID)
    if (JSESSIONID) {
        next()
    } else {
        next("/login")
    }
})

4.utilにクッキーを新規作成する.jsファイル

import Cookies from "js-cookie"

export default {
    set(key, value, options) {
        Cookies.set(key, value, options)
    },
    get(key) {
        return Cookies.get(key)
    },
    remove(key) {
        return Cookies.remove(key)
    },
}

5.utilフォルダを新規作成し、utilにindexを新規作成する.jsファイル

/**
 *       
 */
export function clearLoginInfo () {
  cookies.remove('JSESSIONID')
  //       localStorage    
  localStorage.setItem('user_name', null)
  localStorage.setItem('user_id', 0)
  // store.commit('resetStore')
  router.options.isAddDynamicMenuRoutes = false
}

6.ログインページ、新規login.vue

    import cookies from "@/utils/cookies";
    import axios from 'axios'
    export default {
        data() {
            return {
                form: {
                    userName: "",
                    password: ""
                },
                rules: {
                    userName: [{ required: true, message: "       ", trigger: "blur" }],
                    password: [{ required: true, message: "      ", trigger: "blur" }]
                }
            };
        },

        methods: {
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        axios.post('xxx',{
                            params: {
                                'username': this.form.userName,
                                'password': this.form.password
                            },false,'x-www-form-urlencoded'),
                            //       x-www-form-urlencoded       post              ，              
                            headers:{
                                'content-type':'application/x-www-form-urlencoded'
                            },
                        }).then(({data}) => {
                            if (data && data.code === 200) {//               
                                console.log(data)
                                this.$message.success(data.msg)
                                cookies.set("JSESSIONID",data.data.sessionId)//   JSESSIONID       ，JSESSIONID               session。         session      JSESSIONID           session        。
                                //      
                                this.$router.replace({ name: 'home' })
                            } else {
                                this.$message.error(data.msg)
                            }
                        }).catch(() => {})
                    }
                });
            },
            resetForm() {
                this.$refs["form"].resetFields();
            }
        }
    };

7.ログインに成功すると、ホームページに表示され、viewフォルダ内にmainを新規作成する.vue、ここのページは自分の関連することによって異なっていることができて、だから私のここはただ登録した後にアカウントの関連する情報の表示部分だけを放します

    import { clearLoginInfo } from '@/utils'
     import axios from 'axios'
    export default {
        computed: {
            userName:{
                get () { return this.$store.state.user.name }
            }
        },
        methods: {
            //   
            logoutHandle() {
                this.$confirm(`    [  ]  ?`, '  ', {
                    confirmButtonText: '  ',
                    cancelButtonText: '  ',
                }).then(() => {
                   axios.post('xxx').then(({data}) => {
                        if (data && data.code === 200) {//               
                            clearLoginInfo()
                            this.$router.push({name: 'login'})
                        }
                    })
                }).catch(() => {
                })
            }
        }
    };