利用vuex實現登入狀態的儲存與未登入狀態不允許瀏覽，具體有哪些方法？

下面我就為大家分享一篇vuex實現登入狀態的儲存,未登入狀態不允許瀏覽的方法，具有很好的參考價值，希望對大家有所幫助。

基礎想法就是使用vuex狀態管理來儲存登入狀態(其實就是存一個值，例如token)，然後在路由跳轉前進行登入狀態的判斷，可以使用vue-router的全域前置守衛beforeEach，也可以使用路由獨享的守衛beforeEnter。

導航守衛

如其名，vue-router" 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。物件來應付這些變化，或使用beforeRouteUpdate的元件內守衛。

##2、在失活的元件裡呼叫離開守衛。 。 ##8、呼叫全域的beforeResolve 守衛(2.5 )。 。 #你可以使用router.beforeEach註冊一個全域前置守衛

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

當一個導航觸發時，全域前置守衛會依照建立順序呼叫。一直處於等待中。要離開的路由next: Function:一定要呼叫該方法來resolve 這個鉤子。 。按鈕），那麼URL 位址會重設到from 路由對應的位址。目前的導航被中斷，然後進行一個新的導航。

next(error):(2.4.0 ) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會傳遞給 router.onError()註冊過的回呼。

確保要呼叫 next 方法，否則鉤子就不會被 resolved。

路由獨享的守衛

你可以直接在路由設定上定義beforeEnter守衛：

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

#還有其他部分守衛，詳情可以看官方文件https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

安裝vuex後

建立store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  isLogin: 0
}
const mutations = {
  changeLogin(state,status){
    state.isLogin = status;
  }
}
const actions = {
  loginAction({commit}){
    commit('changeLogin',1);
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

login.vue中

#引入import { mapActions,mapState } from 'vuex'接著進行登錄狀態的改變，base_url就是路徑

export default {
    name: 'Login',
    data(){
      return{
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
        },
        showLogin: false
      }
    },
    mounted(){
      this.showLogin = true;
    },
    computed: {
      ...mapState(['isLogin'])
    },
    methods: {
      ...mapActions(['loginAction']),
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){
              console.log('验证通过');
              this.loginAction();
              this.$router.push('manage');
            }else{
              console.log('账号密码出错');
              // this.$message.error('账号密码出错');
              this.$message({
                type: 'error',
                message: '账号密码出错'
              });
            }
            console.log('请求地址: ' + base_url);
          }else{
            console.log('验证失败');
            return false;
          }
        })
      }
    }
  }

接下去只要使用路由守衛即可

beforeEach使用實例

router.beforeEach((to,from,next)=>{
  if(to.meta.check){
    var check = async function(){
      const result = await checkUser();
      if(result.status == 0){
        next();
      }else{
        alert('用户未登录');
        next({path: '/login'});
      }
    }
    check(); //后台验证session
  }else{
    next();
  }
})

#beforeEnter使用實例

export default new Router({
  routes: [
    {
     path: '/login',
     component: Login
    },
    {
      path: '/manage',
      name: '',
      component: Manage,
      beforeEnter: (to,from,next)=> {  //导航守卫
      console.log(to)
      console.log(from)
      if(store.state.isLogin == 1){
       console.log('用户已经登录');
       next();
      }else{
       console.log('用户未登录');
       next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

Node.js實作註冊郵箱啟動功能的方法範例

Webpack 之babel-loader檔案預處理器詳解

jQuery實作新聞播報捲動及淡入淡出效果範例

以上是利用vuex實現登入狀態的儲存與未登入狀態不允許瀏覽，具體有哪些方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！