通常vue注册或者登录需要使用Vuex和VueRouter来保存用户状态Vuex：保存用户状态，是否登录等最简单的StoreimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({state(){return{//sessionStorageuid:window.sessionStorage.getItem('uid'),//storage默认存储为字符串，转换为原始数据格式isLogin:window.sessionStorage.getItem('isLogin'),//localstorgeautoLoginIn30Days:window.localStorage.getItem('autoLogin30Days'),LocalUid:window.localStorage.getItem('LocalUid'),localIsLogin:window.localStorage.getItem('localIsLogin'),}},getters:{},mutations:{//sessionStorage$_setLogin(state,value){state.isLogin=valuesessionStorage.setItem('isLogin',value)},$_setUID(state,value){状态.uid=valuesessionStorage.setItem('uid',value)},//localstorge$_setLocalLogin(state,value){state.localIsLogin=valuelocalStorage.setItem('localIsLogin',value)},$_setLocalUID(state,value){state.LocalUid=valuelocalStorage.setItem('LocalUid',value)},AUTO_LOGIN:(state,value)=>{状态.autoLoginIn30Days=valueif(state.autoLoginIn30Days){window.localStorage.setItem('LocalUid',state.LocalUid)//window.localStorage.setItem('localIsLogin',state.localIsLogin)window.localStorage.setItem('autoLoginIn30Days',state.autoLoginIn30Days)}else{window.localStorage.removeItem('localIsLogin')window.localStorage.removeItem('LocalUid',state.LocalUid)window.localStorage.setItem('autoLoginIn30Days',state.autoLoginIn30Days)}},注销:(state)=>{state.localIsLogin=nullstate.localUser=nullstate.autoLoginIn30Days=falsewindow.sessionStorage.removeItem('isLogin')window.sessionStorage.removeItem('user')window.localStorage.removeItem('localIsLogin')window.localStorage.removeItem('localUser')window.localStorage.setItem('autoLoginIn30Days',false)}}})exportdefaultstorechangeVuex的在商店中声明的唯一方法是提交突变。改变store.state的方法都写在mutations:{}里面，这里写了几个方法：方法1.使用sessionStorage保存当前登录uid和是否登录isLogin方法2.LocalStorage保存登录uid并且是登录。我们看到b站的登录注册有没有登录就记住我的功能，实现类似的效果：如果用户没有勾选记住我，就只用方式一的sessionStorage保存用户信息。如果用户勾选记住我，使用方法2localStorage保存用户信息。AUTO_LOGIN方法是提交到商店30天不登录。LOGOUT就是退出，提交到商店实现页面是否需要登录，有一些路由需要登录才能进入，比如个人中心等，还有一些路由不用登录也可以进入登录，比如登录页面等。去routes.js文件改：{path:'/',redirect:'/home',//域名直接跳转到首页},{//Loginpath:'/login',component:login,meta:{isLogin:false}},{//个人中心path:'/personal',component:personal,meta:{isLogin:true}},可以配置定义路由时的meta字段：个人中心页面meta:{isLogin:true}，参考官网，查看全局导航守卫中的meta字段，这个全局导航是我们权限判断的重点，一般写在router文件夹，我们直接写在project\s中，以便展示在rc\main.js文件中，importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'import'@/style/index.scss'import'@/utils/rem'从'@/utils/axios'导入axios'从'./store/index'导入存储'从'./utils/global'导入全局Vue.config.productionTip=falseVue.use(global)router.beforeEach((to,from,next)=>{constisLogin=store.state.isLogin?store.state.isLogin:window.sessionStorage.getItem('isLogin')constlocalIsLogin=store.state.localIsLogin?('localIsLogin')letAuthLogin=window.sessionStorage.isLogin=='true'||window.localStorage.getItem('autoLoginIn30Days')=='true'&&window.localStorage.getItem('localIsLogin')=='true'if(to.matched.some(m=>m.meta.isLogin)){//需要认证的页面if(!AuthLogin){//如果没有认证next({path:'/login',query:{}})return}else{next()}}else{if(AuthLogin){//如果已经登录，想进入登录注册界面，则重定向回首页next({path:'/home',query:{}})}else{next()}}})newVue({router,store,render:h=>h(App),}).$mount('#app')然后判断逻辑已经完成，效果是如果用户进入了一个meta字段为isLogin:true的页面，说明该页面需要认证，if(to.matched.some(m=>m.meta.isLogin)){...}使用to.matched.some是遍历路由数组中的每一个值进行判断。这样做的好处是子路由to.matched只需要在上级路由中添加requiresAuth，其下的所有子路由都不需要添加到。官网也是这样写的：最后在项目的login.vue中，只需要在登录验证方法中向store提交状态即可if(this.rememberMe){//勾选remembermethis.$store.commit('$_setLocalLogin',true)this.$store.commit('$_setLocalUID',123)this.$store.commit('AUTO_LOGIN',true)}else{this.$store.commit('AUTO_LOGIN',false)}this.$store.commit('$_setLogin',true)this.$store.commit('$_setUID',123)this.$router.push({name:'home',params:{}})implementation新增登录逻辑：保存状态后30天内免费登录，可在登录页面登录。如果用户验证通过，使用this.$store.commit提交，用户信息会保存到sessionStorage中。同时，如果用户勾选记住我，提交AUTO_LOGIN，用户信息保存到localStorage，下次关闭浏览器后，直接访问域名->跳转到首页，无需登录，用户需要点击右上角注销账号才能清除localstorage当然，这里还有一个后台验证接口，用户登录成功后保存token，这个token有过期时间，检测验证用户来源等等，这时用户需要重新登录
