vue-routerはvuexと連携してユーザー権限制御機能を実現します。

フロントエンド検証ユーザを実現するためには、バックエンドはユーザ登録時にそのユーザの状態を記録して暗号化してフロントエンドに戻す必要があります。その後、このユーザのすべての要求には、この暗号化された状態が付随され、バックエンドはこの状態を取って復号し、以前に保存されていた状態と比較して、このユーザが登録されているか、または適法であるかを判断する。
私はnodeを使って、地元のexpressサービスを簡単に書いて、上記の機能を実現します。完全なコードを直接貼り付けます。

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const app = express();
// secret        
const secret = 'rhwl';
app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', '*');
 res.header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT');
 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
 if (req.method.toLowerCase() === 'options') {
  return res.end();
 }
 next();
});
app.use(bodyParser.json());
app.post('/login', (req, res) => {
 const { username } = req.body;
 if (username === 'admin') { //        ，  jwt      token
  res.json({
   code: 0,
   username: 'admin',
   token: jwt.sign({ username: 'admin' }, secret, {
    expiresIn: 20,
   }),
  });
 } else {
  res.json({
   code: 1,
   data: '      ',
  });
 }
});
app.get('/validate', (req, res) => {
 const token = req.headers.authorization; //        token  
 jwt.verify(token, secret, (err, decode) => { //   token    
  if (err) {
   return res.json({
    code: 1,
    data: '  token  ',
   });
  }
  //       ，      token，     
  res.json({
   username: decode.username,
   code: 0,
   token: jwt.sign({ username: 'admin' }, secret, {
    expiresIn: 20,
   }),
  });
 });
});
app.listen(3000, ()=>{
  console.log('    3000    ');
});

2.プロジェクトのaxiosパッケージ
そして、私たちはプロジェクトの中で自分のニーズに合ったajax要求をカプセル化しました。今は通常axiosライブラリに基づいています。自分でカプセル化したajaxプラグインには、各要求ヘッダにtokenを追加します。コードの実装:

// ajaxResquest.js
import axios from 'axios';
class ajaxResquest {
  constructor(){
    //           baseURL
    this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/';
    this.timeout = 5000; //        5s
  }
  request(config){
    const instance = axios.create({
      baseURL: this.baseURL,
      timeout: this.timeout,
    });
    instance.interceptor.request.use((config) => {
      //        token            
      //                          
      config.headers.Authorization = localStorage.getItem('token');
      return config;
    }, (err) => {
      return Promise.reject(err);
    });
    instance.interceptor.response.use((req,res) => {
      return req.data;
    }, (err) => {
      Promise.reject(err);
    });
    //    request           instance 
    return instance(config);
  }
}
export default new ajaxRequest();

そして統一管理項目アプリインターフェース：

// api.js
import ajax from 'ajaxResquest';
export const userLogin = (username) => ajax.request({url: '/login', method: 'POST', data: {
  username,
}});
export const userValidate = () => ajax.request({url: '/validate'});

次に私達はプロジェクトの中でユーザー登録と権限検証の需要を具体的に実現します。
3.vuex記録ユーザー登録
まず、ログインコンポーネントをvuexに合わせて使用して、ユーザのログインをトリガし、ログイン後の情報をvuexに保存して、コンポーネントに登録するコード：

// userLogin component
<template>
  <div>
    <el-input style="width:200px" v-model="username"></el-input>
    <el-button @click="login">  </el-button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      username: '',
    }
  },
  methods: {
    login(){
      //     vuex  actions， vuex         
      //                vuex 
      this.$store.dispatch('login', this.username).then((data) => {
        //       ，                    
        this.$router.push('/profile');
      });
    }
  }
}
</script>

続いてvuexのstore.jsです。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import {userLogin, userValidate} from 'api.js';
Vue.use(Vuex);
export default Vuex.store({
  state: {
    username: '', 
  },
  mutations: {
    setUsername(state, username){
      state.username = username;
    }
  },
  actions: {
    async login({commit}, username){
      const res = await userLogin(username);
      if (res.code === 1) { //     
        return Promise.reject(res);
      }
      //            token     
      localStorage.setItem('token', res.token);
      //        vuex 
      commit('setUsername', username);
    }
  }
});

上記の操作を経て、私達はユーザー登録中にログインインターフェースを呼び出す操作をVuexで実現し、ログイン後のユーザー名をvuexに保存します。この時のtokenはブラウザのローカルに保存します。しかし、vuexのデータは耐久データではなく、更新後に保存されたユーザー名が消えます。その後、更新ページまたはルートジャンプを実現する際にユーザーチェックを行います。検証が通れば、新しいtokenとusernameを生成して保存します。
4.vuexはvue-routerと協力して登録検証を行う。
ユーザーがページを更新する場合、または他のページをクリックしてルートrouterを切り替える場合、保存されているtokenを検証することによって、現在のユーザが合法的かどうかを検証するバックエンドのvalidateインターフェースを呼び出す必要がある。私たちはvuexのstore.jsに以下のコードを追加します。

export default Vuex.store({
  state: {
    username: '',
  },
  mutations: {
    setUsername(state, username){
      state.username = username;
    } 
  },
  actions: {
    async login({commit}, username){
      ...
    },
    async validate({commit}) {
      //   userValidate ，  
      const res = await userValidate();
      if (res.code === 1) { //         
        return Promise.reject(res);
      }
      //       ，    token username 
      localStorage.setItem('token', res.token);
      commit('setUsername', res.username);
    }
  }
});

基本的に上のコードを通じて、ユーザー権限のコントロールに必要なすべての前提操作を実現しました。

ユーザがローカルに登録してtoken

を保存することに成功した。

自分でカプセル化したajaxの要求ヘッダに保存のtoken情報を追加する

。

バックエンドサービスは、フロントエンドtokenの検証能力を提供する。

これからルートルートルートルートルートルートルートの更新または変更の時に、どのように権限制御を行いますか？
5.vue-routerフックはユーザー権限制御を実現します。
vue-routerを使ったことがある学生はみんな知っています。道にはフックがあります。公式文書では「Vue-router」と呼ばれています。 ナビゲーションガード。ナビゲーションガードは、私たちが正確に各ルートを変更する時に操作することができます。ここでユーザー権限を判断します。vueプロジェクトのmain.jsで修正：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//                   
//                   
const whiteList = ['/'];
router.beforeEach(async (to, from, next) => {
  //          ，    
  if (whiteList.includes(to.path)) {
    next();
  }
  //      ，  vuex  validate  
  const flag = await store.dispatch('validate');
  if (flag) { //       ，    
    next();
  } else { //       
    next('/login'); //         
    //      ，      router  meta     isNeeded: true/false
    //                                 
  }
});
// vuex
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

締め括りをつける
以上述べたのは小编が皆さんに绍介したvue-routerがvuexを结び付けてユーザー権限のコントロールを実现しました。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。