vuex+localStorage 登录

1.安装vuex npm i -s vuex（若axios未安装，则npm i -s axios）
2.新建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里新建cookies.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

<template>
    <div>
        <el-card>
            <div>用户登录</div>
            <el-form :model="form" label-width="5rem" :rules="rules" ref="form">
                <el-form-item prop="userName">
                    <el-input  placeholder="请输入用户名" v-model="form.userName" />
                    <i></i>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="form.password" show-password />
                    <i></i>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    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();
            }
        }
    };
</script>

7.若登录成功，显示在主页面，在view文件夹内新建main.vue，这里页面根据自己涉及会有不同，所以我这里只放登录后账号相关信息显示部分

<template>
...
<div>
    <el-dropdown :show-timeout="0" placement="bottom">
       <span class="el-dropdown-link">
         您好,{{ userName }}
       </span>
       <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</div>
</template>
<script>
    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(() => {
                })
            }
        }
    };
</script>