关于vue-router:vue登录与注册判断页面权限是否需要登录保存状态30天内免登陆

通常vue注册或登录保留用户状态须要用到Vuex和Vue Router

Vuex：保留用户状态，是否登录等
Vue Router:页面门路与权限

在一个Vue我的项目中，store文件夹个别是Vuex文件夹，咱们能够创立一个index.js文件 最简略的 Store

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
const store = new Vuex.Store({
  state () {
    return {
    //sessionStorage
      uid:window.sessionStorage.getItem('uid'),//storage默认存储为字符串，转换成本来数据格式
      isLogin: window.sessionStorage.getItem('isLogin'),
    //localstorge
      autoLoginIn30Days:window.localStorage.getItem('autoLoginIn30Days'),
      LocalUid:window.localStorage.getItem('LocalUid'),
      localIsLogin:window.localStorage.getItem('localIsLogin'),
      
    }
  },
  getters: {

  },
  mutations: {
    //sessionStorage
    $_setLogin (state, value) {
      state.isLogin = value
       sessionStorage.setItem('isLogin', value)
     
    },
    $_setUID(state,value){
        state.uid=value
        sessionStorage.setItem('uid',value)
    },
    
    // localstorge
    $_setLocalLogin (state, value) {
      state.localIsLogin = value
        localStorage.setItem('localIsLogin', value)
     
    },
    $_setLocalUID(state,value){
        state.LocalUid=value
        localStorage.setItem('LocalUid',value)
    },
    AUTO_LOGIN:(state,value)=>{
        state.autoLoginIn30Days=value
        if(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)
        }
    },
    LOGOUT:(state)=>{
        state.localIsLogin=null
        state.localUser=null
        state.autoLoginIn30Days=false
        
        window.sessionStorage.removeItem('isLogin')
        window.sessionStorage.removeItem('user')        
        window.localStorage.removeItem('localIsLogin')
        window.localStorage.removeItem('localUser')
    window.localStorage.setItem('autoLoginIn30Days',false)
        
        
    }

    
  }
})
 
export default store

更改 Vuex 的 store 中的状态的惟一办法是提交 mutation,更改store.state的办法都写在mutations: {}中，这外面咱们写了几个办法：
办法1.应用sessionStorage保留以后登录uid和是否已登录isLogin
办法2.localStorage保留登录uid和是否已登录isLogin

咱们看b站的登录注册有实现记住我免登陆的性能，要实现相似的成果是：
如果用户未勾选记住我，则只应用办法1 sessionStorage保留用户信息，如果用户勾选了记住我，则要应用办法2 localStorage保留用户信息

这里AUTO_LOGIN办法就是30天免登陆的状态提交到store，LOGOUT是退出登录提交到store

实现判断页面是否须要登录

我的项目中有一些路由是须要登录才能够进入的，比方集体核心等
有一些路由是不须要登录就能够进入，比方登录页等
去到routes.js文件更改：

{
 path: '/',
 redirect: '/home',// 域名间接跳转到主页
},
{
 //登录
 path: '/login',
 component: login,
 meta: {
   isLogin: false
 }
},
{
 //集体核心
 path: '/personal',
 component: personal,
 meta: {
   isLogin: true
 }
},

定义路由的时候能够配置 meta 字段：集体核心页 meta: { isLogin: true } ,参考官网可知，在全局导航守卫中查看元字段，这个全局导航就是咱们权限判断的重点，通常写在router文件夹中，咱们为了展现间接写在我的项目\src\main.js文件中

import Vue from 'vue'

import App from './App.vue'
import router from './router'

import '@/style/index.scss'
import '@/utils/rem'
import axios from '@/utils/axios'
import store from './store/index'
import global from './utils/global'



Vue.config.productionTip = false
Vue.use(global)



router.beforeEach((to, from, next) => {

const isLogin=store.state.isLogin ? store.state.isLogin: window.sessionStorage.getItem('isLogin')
const localIsLogin=store.state.localIsLogin ? store.state.localIsLogin: window.localStorage.getItem('localIsLogin')

let AuthLogin=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()
    }
    
    }
})

new Vue({
  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){//勾选了记住我
                this.$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: {}})
            

实现了登录逻辑：保留状态30天内免登陆

在login页面登录，如果用户验证通过，应用this.$store.commit提交，用户信息保留到sessionStorage，同时用户如果勾选了记住我，提交AUTO_LOGIN，用户信息保留到了localStorage，敞开浏览器后下次，间接拜访域名->跳转到home页，无需登录，用户需在右上角点击退出账号则清空localstorage

当然这里还须要后盾校验接口，用户登录胜利后保留令牌，这个令牌有过期工夫，检测验证用户起源等，那么用户须要再次登录了