vue管理员鉴权

第一种方法

在路由里面添加标识符 isAdmin: true,
和服务器返回是否是管理员
联合判断

//看vuex里面的用户信息，是否是管理员，是管理员就全部是true
//不是管理员，看当前路由信息，的meta标签 判断是否是管理员
//是就显示，不是就不显示
 <el-main
     :style="{ background: 'gray' }"
      v-show="
        this.$store.state.user.user.isAdmin || !this.$route.meta.isAdmin
      "
    >
    <router-view></router-view>
  </el-main>

第二种方法

就是添加全局路由守卫判断，是否是管理员，才有权限进去某个路由

整体流程

Login 组件
　　登录成功后做本地存储和store存储，并进行跳转。

登陆代码

async handleLogin(e) {
    e.preventDefault();
    //获取登录表单值
    let parmas = {
        username: this.model.username,
        passwold: this.model.passwold
    };
    //发送登录异步请求，获取结果集
    const res = await this.$http.get("/api/login", parmas);
    const { code, token, massage } = res.data;
    //code=='0'表示登录成功，进行本地存储和store存储 并进行跳转。
    //else 弹出错误提示
    if (code == "0") {
        this.$store.commit("setToken", res.data.token);
        localStorage.setItem("token", token);
        //如果是由需要鉴权的页面跳转到登录页面 则redirect= 
       // this.$route.query.redirect，
       // 如果是直接点击登录跳转到登录页面，则redirect= '/'
        const redirect = this.$route.query.redirect || "/";
        this.$router.push(redirect);
    } else {
        const toast = this.$createToast({
            time: 2000,
            txt: massage || "登录失败",
            type: "error"
        });
        toast.show();
    }
}

routes[]里用 mate.auth来标识是否需要鉴权。
　router.beforeEach做个全局路由守卫，
　根据是否需要鉴权以及是否已经登录来进行不同操作。

axios

axios.interceptors.request.use拦截axios所有http请求，
如果存在token，则放入请求头。
axios.interceptors.response.use
拦截的axios的响应，如果token以及失效，
则清除本地缓存和store存储并跳转到登录页面。

// 拦截axios所有http请求，预先放入token请求头
axios.interceptors.request.use(config => {
    if (store.state.token) {
        // 若存在token，则放入请求头
        config.headers.token = store.state.token;
    }
    return config;
});
 
// 响应拦截器，提前预处理响应
axios.interceptors.response.use(
    response => {
        // 如果code是-1，说明用户已注销或者token已过期
        // 此时需要重新登录，并且还要清除本地缓存信息和store数据
        if (response.status == 200) {
            const data = response.data;
            if (data.code == -1) {
                logoutFun()
            }
        }
        return response;
    },
    err => {
        if (err.response.status === 401) { // 未授权
            logoutFun()
        }
    }
);
 
function logoutFun() {
    // 清空本地缓存的token和store里的token
    store.commit("setToken", "");
    localStorage.removeItem("token");
    // 跳转至登录页，并携带用户退出时或token失效时的页面路由，
    //方便登录后直接跳转到此页面。
    router.push({
        path: "/login",
        query: {
            redirect: router.currentRoute.path
        }
    });
}

服务端也需要做请求处理的中间件。如果请求不是req.path不是’/api/login’并且没有携带token,则返回错误状态码401（错误状态码前后端约定好）。我们在vue.config.js里模拟后台接口’/api/login’

import axios from "axios";
import store from "./store";
import router from "./router";
 
app.use((req, res, next) => {
    //只对api开头的请求做拦截处理
    if (/^\/api/.test(req.path)) {
        if (req.path == '/api/login' || req.headers.token) {
            next();
        } else {
            //设置错误状态码为401
            res.sendStatus('401')
            next();
        }
    } else {
        next();
    }
})